Flip Card

Collapse or expand divs with CSS

Card Flip with Text

Hover over the image below:

Porsche Racing

Porsche Racing

Porsche racing. It is one of the most competitive and accomplished racing programs in the world. From club racing at the local level, to professional racing on the biggest stages.

Code Example

    <style>
     .flip-card {
      background-color: transparent;
      width: 300px;
      height: 200px;
      perspective: 1000px;
      border: 1px solid #0b57d1;
      border-radius: 7px;
      float: none;
      margin: 0 auto;}
 
     .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.6s;
      transform-style: preserve-3d;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
      border-radius: 7px;}

     .flip-card:hover .flip-card-inner {
      transform: rotateY(180deg);
      border-radius: 7px;}

     .flip-card-front, .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      border-radius: 7px;
      box-sizing: border-box;}

     .flip-card-front {
      background-color: #bbb;
      color: black;
      border-radius: 7px;}

     .flip-card-back {
      background-image: url('../images/levis.png'), linear-gradient(#6DB3F2, #0d4d86); 
      background-color: #2980b9;
      color: white;
      transform: rotateY(180deg);
      border-radius: 7px;}
    </style>