• 2020-11-01

    Css only hover flip card

    Author

    Comments

    Start a discussion

    The code is a bit long so you need to read more to see it.

    HTML

    <div class="card">
      <div class="front">
        <img src="https://csspoo.com/images/v.jpg">
      </div>
      <div class="back">
        <div class="text">
          Soufflé cake jujubes croissant. Lollipop pastry liquorice caramels. Candy canes tootsie roll tootsie roll marzipan icing.
    
    Gummi bears cotton candy macaroon dragée cake chocolate cake pie biscuit pudding.
        </div>
      </div>
    </div>

    CSS

    .card {
      position: relative;
      height: 150px;
      width: 300px;
    }
    
    .card img {
      width: 300px;
      height: 150px;
      object-fit: cover;
      object-position: bottom;
    }
    
    .card .text {
      background: #333;
      color: #ccc;
      height: 150px;
      padding: 1rem;
      box-sizing: border-box;
    }
    
    .card .front,
    .card .back {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transition: transform 200ms ease-in;
    }
    
    .card .front {
      transform: scaleX(1);
      background: green;
      transition-delay: 100ms;
    }
    .card .back {
      transform: scaleX(0);
      background: blue;
    }
    
    .card:hover .front {
      transform: scaleX(0);
    }
    .card:hover .back {
      transform: scaleX(1);
      transition-delay: 200ms;
    }

    Sources

    You saw it first on CSSPoo.