<div class="grid">
	<div class="card card__one">
		<figure class="card__img">
			<img src="https://res.cloudinary.com/jasonheecs/image/upload/v1479748567/card-hover/photo-1.jpg" width="340" height="280" />
		</figure>
		<div class="card__desc">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, tempora.
		</div>
	</div>

	<div class="card card__two">
		<figure class="card__img">
			<img src="https://res.cloudinary.com/jasonheecs/image/upload/v1479748268/card-hover/photo-2.jpg" width="340" height="280" />
		</figure>
		<div class="card__desc">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis nemo rem quod perspiciatis unde ducimus aliquam natus facilis.
		</div>
	</div>

	<div class="card card__three">
		<figure class="card__img">
			<img src="https://res.cloudinary.com/jasonheecs/image/upload/v1479748268/card-hover/photo-3.jpg" width="340" height="280" />
		</figure>
		<div class="card__desc">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, possimus dicta ipsam est mollitia.
		</div>
	</div>
</div>
$color-bg: #f8f8f8;
$card-padding: 20px;
$grid-gutter: 31px;

// Media Queries breakpoints
$small: 480px;
$medium: 768px;
$large: 992px;
$x-large: 1200px;

body {
  display: flex;
  align-items: center;
  min-height: 100vh;
  background: $color-bg;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 340px;
  margin: 0 auto;

  @media screen and (min-width: $medium) {
    max-width: 1200px;
  }
}

.card {
  position: relative;
  flex: 1 1 100%;
  margin: $grid-gutter 0;
  padding: $card-padding;
  background: lighten($color-bg, 3%);

  @media screen and (min-width: $medium) {
    flex-basis: calc(33.33% - (#{$grid-gutter * 2} + #{$card-padding * 2}));
    margin: 0 $grid-gutter;
  }
}

.card__thumb {
  overflow: hidden;
}

.card__img {
  margin: (-$card-padding) (-$card-padding) 0;

  img {
    max-width: 100%;
    height: auto;
    border: 0;
    vertical-align: middle;
    box-sizing: border-box;
  }
}

.card__desc {
  margin-top: $card-padding;
}

.card__two .card__img {
  padding: 20px;
}

.card__one {
  transition: transform .5s;

  &::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 2s cubic-bezier(.165, .84, .44, 1);
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .15);
    content: '';
    opacity: 0;
    z-index: -1;
  }

  &:hover,
  &:focus {
    transform: scale3d(1.006, 1.006, 1);

    &::after {
      opacity: 1;
    }
  }
}

.card__two {
  &::before,
  &::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: opacity .38s ease-in-out, transform .35s ease-in-out;
    content: '';
    opacity: 0;
    pointer-events: none;
  }

  &::before {
    transform: scale3d(0, 1, 1);
    transform-origin: left top;
    border-top: 1px solid #acacac;
    border-bottom: 1px solid #acacac;
  }

  &::after {
    transform: scale3d(1, 0, 1);
    transform-origin: right top;
    border-right: 1px solid #acacac;
    border-left: 1px solid #acacac;
  }

  &:hover,
  &:focus {
    &::before,
    &::after {
      transform: scale3d(1, 1, 1);
      opacity: 1;
    }
  }
}

.card__three {
  &::before,
  &::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: scale3d(0, 0, 1);
    transition: transform .3s ease-out 0s;
    background: rgba(255, 255, 255, .1);
    content: '';
    pointer-events: none;
  }

  &::before {
    transform-origin: left top;
  }

  &::after {
    transform-origin: right bottom;
  }

  &:hover,
  &:focus {
    &::before,
    &::after {
      transform: scale3d(1, 1, 1);
    }
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.