Flip Card

By Rafi

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;
  backface-visibility: hidden;
}

.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;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.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;
}

Flip Card

By Rafi

App Dashboard Layout

Marketing Site Content Section

Marketing Site Footer

Flip Card

By Rafi

Similar Building Blocks

App Dashboard Layout

Marketing Site Content Section

Marketing Site Footer