Flip and Click Cards using jQuery and CSS

Puneet Sharma

5 years ago

Here is an HTML template with a demo for flip and click cards. I have used jQuery for the active state and worked on CSS to transform rotate the card. After rotation user can see the associated text can click on it to go to the associated URL. This works on all platforms including Ipads and Mobiles.

DEMO

Open demo in a full window – https://demos.webdevpuneet.com/jquery/flip-cards/index.html

HTML

<div class="flipnclick">
    <a target="_blank" href="http://webdevpuneet.com/" class="flipnclick__link"></a>
    <img class="flipnclick__image" src="https://i0.wp.com/webdevpuneet.com/wp-content/uploads/2019/10/puneet1-1.png">
    <div class="flipnclick__content">
      Hello, I'm Puneet. I've Been Building Websites For Over 9 Years!
      I love to work creatively and help my clients from across the globe, express their creative ideas, through their websites.
    </div>
  </div>

CSS

body {
      font-size: 14px;
    }

    .flipnclick {
      width: 200px;
      height: 255px;
      border: 1px solid;
      text-align: left;
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      transition: all 0.5s ease-in;
      -moz-transition: all 0.5s ease-in;
      -webkit-transition: all 0.5s ease-in;
      transform: rotateY(0);
      -moz-transform: rotateY(0);
      -webkit-transform: rotateY(0);
      display: inline-block;
      margin: 10px;
    }

    .flipnclick.active {
      transform: rotateY(-180deg);
      -moz-transform: rotateY(-180deg);
      -webkit-transform: rotateY(-180deg);
    }

    .flipnclick__image {
      position: absolute;
      background: #fff;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      transition: all 0.5s ease-in;
      -moz-transition: all 0.5s ease-in;
      -webkit-transition: all 0.5s ease-in;
    }

    .flipnclick__content {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 15px;
      overflow-y: hidden;
      background: #a51382;
      color: #fff;
      font-size: 20px;
      transition: all 0.5s ease-in;
      -moz-transition: all 0.5s ease-in;
      -webkit-transition: all 0.5s ease-in;
      transform: rotateY(-180deg);
      -moz-transform: rotateY(-180deg);
      -webkit-transform: rotateY(-180deg);
      -webkit-perspective: 1000px;
      text-decoration: none;
      opacity: 0;
    }

    .flipnclick__arrow {
      position: absolute;
      right: 15px;
      bottom: 15px;
    }

    .flipnclick__link {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    .flipnclick.active .flipnclick__content {
      opacity: 1;
    }

    .flipnclick.active .flipnclick__image {
      opacity: 0;
    }

    .flipnclick.active .flipnclick__link {
      z-index: 111;
    }

jQuery

$('.flipnclick').click(function() {
      $this = $(this);
      if ($this.hasClass('active')) {

      } else {
        $('.flipnclick').removeClass('active');
        $(this).addClass('active');
      }
    })

Complete Source

<!doctype html>
<html lang="en">

<head>
  <title>Flip and Click Cards using jQuery and CSS</title>

  <!-- Meta Tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
  <meta name="robots" content="INDEX,FOLLOW" />
  <meta name="keywords" content="" />
  <meta name="description" content="Flip and Click Cards using jQuery and CSS" />
  <meta name="author" content="" />
  <meta name="copyright" content="" />

  <style>
    body {
      font-size: 14px;
    }

    .flipnclick {
      width: 200px;
      height: 255px;
      border: 1px solid;
      text-align: left;
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      transition: all 0.5s ease-in;
      -moz-transition: all 0.5s ease-in;
      -webkit-transition: all 0.5s ease-in;
      transform: rotateY(0);
      -moz-transform: rotateY(0);
      -webkit-transform: rotateY(0);
      display: inline-block;
      margin: 10px;
    }

    .flipnclick.active {
      transform: rotateY(-180deg);
      -moz-transform: rotateY(-180deg);
      -webkit-transform: rotateY(-180deg);
    }

    .flipnclick__image {
      position: absolute;
      background: #fff;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      transition: all 0.5s ease-in;
      -moz-transition: all 0.5s ease-in;
      -webkit-transition: all 0.5s ease-in;
    }

    .flipnclick__content {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 15px;
      overflow-y: hidden;
      background: #a51382;
      color: #fff;
      font-size: 20px;
      transition: all 0.5s ease-in;
      -moz-transition: all 0.5s ease-in;
      -webkit-transition: all 0.5s ease-in;
      transform: rotateY(-180deg);
      -moz-transform: rotateY(-180deg);
      -webkit-transform: rotateY(-180deg);
      -webkit-perspective: 1000px;
      text-decoration: none;
      opacity: 0;
    }

    .flipnclick__arrow {
      position: absolute;
      right: 15px;
      bottom: 15px;
    }

    .flipnclick__link {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    .flipnclick.active .flipnclick__content {
      opacity: 1;
    }

    .flipnclick.active .flipnclick__image {
      opacity: 0;
    }

    .flipnclick.active .flipnclick__link {
      z-index: 111;
    }
  </style>
</head>

<body>
  <div class="flipnclick">
    <a target="_blank" href="http://webdevpuneet.com/" class="flipnclick__link"></a>
    <img class="flipnclick__image" src="https://i0.wp.com/webdevpuneet.com/wp-content/uploads/2019/10/puneet1-1.png">
    <div class="flipnclick__content">
      Hello, I'm Puneet. I've Been Building Websites For Over 9 Years!
      I love to work creatively and help my clients from across the globe, express their creative ideas, through their websites.
    </div>
  </div>

  <div class="flipnclick">
    <a target="_blank" href="http://webdevpuneet.com/" class="flipnclick__link"></a>
    <img class="flipnclick__image" src="https://i0.wp.com/webdevpuneet.com/wp-content/uploads/2019/10/puneet1-1.png">
    <div class="flipnclick__content">
      Hello, I'm Puneet. I've Been Building Websites For Over 9 Years!
      I love to work creatively and help my clients from across the globe, express their creative ideas, through their websites.
    </div>
  </div>

  <div class="flipnclick">
    <a target="_blank" href="http://webdevpuneet.com/" class="flipnclick__link"></a>
    <img class="flipnclick__image" src="https://i0.wp.com/webdevpuneet.com/wp-content/uploads/2019/10/puneet1-1.png">
    <div class="flipnclick__content">
      Hello, I'm Puneet. I've Been Building Websites For Over 9 Years!
      I love to work creatively and help my clients from across the globe, express their creative ideas, through their websites.
    </div>
  </div>

  <div class="flipnclick">
    <a target="_blank" href="http://webdevpuneet.com/" class="flipnclick__link"></a>
    <img class="flipnclick__image" src="https://i0.wp.com/webdevpuneet.com/wp-content/uploads/2019/10/puneet1-1.png">
    <div class="flipnclick__content">
      Hello, I'm Puneet. I've Been Building Websites For Over 9 Years!
      I love to work creatively and help my clients from across the globe, express their creative ideas, through their websites.
    </div>
  </div>

  <!-- JQuery -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script>
    $('.flipnclick').click(function() {
      $this = $(this);
      if ($this.hasClass('active')) {

      } else {
        $('.flipnclick').removeClass('active');
        $(this).addClass('active');
      }
    })
  </script>

</body>

</html>