Let us know what you think about the new Building Blocks

Flip Card

By Rafi

F6
#
How do I use This?

A flipping card with a neat hover interaction that reveals content on the back of the card. On a mobile device this will trigger the flip on a touch (not hover).

HTML
<div class="flip-card card" ontouchstart="this.classList.toggle('hover');">
  <div class="flip-card-inner">
    <div class="flip-card-inner-front">
      <span>Book your next adventure</span>
    </div>
    <div class="flip-card-inner-back">
      <h3 class="flip-card-inner-back-title">Visit Yetiland</h3>
      <p class="flip-card-inner-back-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo doloremque accusantium, repellendus ex debitis molestias, recusandae dignissimos delectus.</p>
      <a href="#" class="button success">Book now</a>
    </div>
  </div>
</div>

$flip-card-height: rem-calc(320);
$flip-card-transition-speed: 0.6s;

.flip-card {
  perspective: 1000;
  border: 0;
  background: transparent;

  &:hover .flip-card-inner,
  &.hover .flip-card-inner {
    transform: rotateY(180deg);
  }
}

.flip-card,
.flip-card-inner-front,
.flip-card-inner-back {
  width: 100%;
  height: $flip-card-height;
}

.flip-card-inner {
  transition: $flip-card-transition-speed;
  transform-style: preserve-3d;
  position: relative;
}

.flip-card-inner-front,
.flip-card-inner-back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

// non-essential front and rear styles
.flip-card-inner-front {
  background: url(https://images.pexels.com/photos/179124/pexels-photo-179124.jpeg?w=940&h=650&auto=compress&cs=tinysrg) 0 0 no-repeat;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;

  span {
    width: 100%;
    text-align: center;
    background: rgba($white, 0.8);
    padding: 0.25rem 0;
    font-size: 1.25rem;
    font-weight: bold;
  }
}

.flip-card-inner-back {
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  background: $medium-gray;
  padding: 1rem;
}

.flip-card-inner-back-title {
  font-weight: bold;
}

.flip-card-inner-back-text {
  line-height: 1.3;
}


.flip-card {
  -webkit-perspective: 1000;
          perspective: 1000;
  border: 0;
  background: transparent;
}

.flip-card:hover .flip-card-inner,
.flip-card.hover .flip-card-inner {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

.flip-card,
.flip-card-inner-front,
.flip-card-inner-back {
  width: 100%;
  height: 20rem;
}

.flip-card-inner {
  transition: 0.6s;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  position: relative;
}

.flip-card-inner-front,
.flip-card-inner-back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.flip-card-inner-front {
  background: url(https://images.pexels.com/photos/179124/pexels-photo-179124.jpeg?w=940&h=650&auto=compress&cs=tinysrg) 0 0 no-repeat;
  z-index: 2;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.flip-card-inner-front span {
  width: 100%;
  text-align: center;
  background: rgba(254, 254, 254, 0.8);
  padding: 0.25rem 0;
  font-size: 1.25rem;
  font-weight: bold;
}

.flip-card-inner-back {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  background: #cacaca;
  padding: 1rem;
}

.flip-card-inner-back-title {
  font-weight: bold;
}

.flip-card-inner-back-text {
  line-height: 1.3;
}

JS