Layered Card Hover Effect Using HTML and CSS

Hello Everyone, In this blog, we will learn how to create Layered Card Hover Effect using HTML and CSS only.

In this Example, we are using bootstrap for responsive designs so that it looks good in all devices.

CSS Cards are used as templates or inspiration for profile cards, display cards, image cards, in web interfaces and even CV/Resumes. These cards feature a variety of CSS effects like hovers, shadows, transitions, sliding, etc.

A sleek and clean CSS Layered Card hover effect, really nice to use in your content cards.

First of all, create an HTML File and paste the below code.

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Layered Hover Card Effect</title>
<link href="css/bootstrap.css" rel="stylesheet" />
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="container">
  <div class="row">
    <div class="col-md-3 col-xs-6" style="margin-bottom: 15px">
      <div class="city_card">
        <div class="city_imgBx">
        <img src="https://images.unsplash.com/photo-1532123675048-773bd75df1b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="images">
        </div>
        <div class="city_details">
        <h2>Heading</h2>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-xs-6" style="margin-bottom: 15px">
      <div class="city_card">
      <div class="city_imgBx">
      <img src="https://images.unsplash.com/photo-1549417229-aa67d3263c09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="images">
      </div>
      <div class="city_details">
      <h2>Heading</h2>
      </div>
      </div>
    </div>
    <div class="col-md-3 col-xs-6" style="margin-bottom: 15px">
      <div class="city_card">
      <div class="city_imgBx">
      <img src="https://images.unsplash.com/photo-1548094878-84ced0f6896d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="images">
      </div>
      <div class="city_details">
      <h2>Heading</h2>
      </div>
      </div>
    </div>
    <div class="col-md-3 col-xs-6" style="margin-bottom: 15px">
      <div class="city_card">
      <div class="city_imgBx">
      <img src="https://images.unsplash.com/photo-1548094878-84ced0f6896d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="images">
      </div>
      <div class="city_details">
      <h2>Heading</h2>
      </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

In the above HTML code, we have created a container class inside the container class we created a row and inside a row, we have created 4 grid of size 3.

Now create a CSS file and paste the below code.

CSS Code:

  body{
    margin: 0;
    padding: 0;
    background: #212121;
    font-family: sans-serif;
  }
  .city_card{
    position: relative;
    width: auto;
    height: 300px;
    background: #fff;
    margin: 50% auto;
    border-radius: 4px;
    box-shadow:0 2px 10px rgba(0,0,0,.2);
  }
  @media(max-width: 480px){
    .city_card{
      position: relative;
      width: auto;
      height: 180px;
      background: #fff;
      margin: 0 auto;
      border-radius: 4px;
      box-shadow:0 2px 10px rgba(0,0,0,.2);
    }
  }
  .city_card:before,
  .city_card:after
  {
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: #fff;
    transition: 0.5s;
    z-index:-1;
  }
  .city_card:hover:before{
  transform: rotate(20deg);
  box-shadow: 0 2px 20px rgba(0,0,0,.2);
  }
  .city_card:hover:after{
  transform: rotate(10deg);
  box-shadow: 0 2px 20px rgba(0,0,0,.2);
  }
  .city_card .city_imgBx{
  position: absolute;
  top: 5px;
  left: 5px;
  bottom: 5px;
  right: 5px;
  background: #222;
  transition: 0.5s;
  z-index: 1;
  }
  
  .city_card .city_imgBx
  {
    bottom: 50px;
  }

  .city_card .city_imgBx img{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .city_card .city_details{
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: 10px;
      height: 20px;
      text-align: center;
  }

  .city_card .city_details h2{
   margin: 0;
   padding: 0;
   font-weight: 600;
   font-size: 15px;
   color: #777;
   text-transform: uppercase;
  }

Output :