Let us know what you think about the new Building Blocks

Flip Card

By Rafi

F6
#
card hover button show hide interaction
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

Similar Building Blocks

containers

People you might know

F6
by Harry Manchanda
containers

Marketing Site Feature Section

F6
by Rafi
containers

Travel Feature Card

F6
by Kevin Ball

Foundation

Foundation is the most advanced responsive front-end framework in the world. Foundation is made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.

Want more?

Talk to us

Tweet us at
@ZURBfoundation

Get involved in
our amazing community.

Stay Updated

Keep up with the latest on Foundation. Find us on Github.

Stay Connected

© 1998‐2017 ZURB, Inc. All rights reserved.