Animated Card Effect Using CSS
Animated Card Effect Using CSS

Everyone says “First Impression is the Last Impression”, A card is something like that, it shows the main content and after opening or hovering it shows the other details. If the main content is not attractive no one would like to know more about it. If we discuss the card in detail, we can think about a business card that shows the details of a business and business owner. It is also the first exposure to the overall image of the business.

So today we are going to create an animated card. Which will show an image, but when the user hovers on the card it will show some details. Let’s start!

Table of Contents

Animated Card Effect Using CSS

We will create two files called index.html and another one style.css.

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Animated Card Effect</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://kit.fontawesome.com/95a02bd20d.js"></script>
</head>
<body>
  <div class="container">
     <div class="card">
       <div class="face face1 card1">
         <div class="content">
            <i class="fab fa-windows"></i>            
           <h3>Windows</h3>
         </div>
       </div>
       <div class="face face2">
         <div class="content">
           <p> <b>Instagram:</b> 
           	<a class="link" href="https://www.instagram.com/codedesignerworld/">
           	@codedesignerworld</a><br>
           	Code is Available on <b>
           	<a class="link" href="https://github.com/codedesignerworld">Github</a>
           </b></p>
           <a class="btn" href="#" type="button">Know More</a>
         </div>
       </div>
    </div>
    
    <div class="card">
       <div class="face face1 card2" >
         <div class="content">
      <i class="fab fa-android"></i>               
      <h3>Android</h3>
         </div>
       </div>
       <div class="face face2">
         <div class="content">
           <p> <b>Instagram:</b> 
           	<a class="link" href="https://www.instagram.com/codedesignerworld/">
           	@codedesignerworld</a><br>
           	Code is Available on <b>
           	<a class="link" href="https://github.com/codedesignerworld">Github</a>
           </b></p>
           <a class="btn" href="#" type="button">Know More</a>
         </div>
       </div>
    </div>    
    <div class="card">
       <div class="face face1 card3">
         <div class="content">
           <i class="fab fa-apple"></i>
            <h3>Apple</h3>
         </div>
       </div>
       <div class="face face2">
         <div class="content">
           <p> <b>Instagram:</b> 
           	<a class="link" href="https://www.instagram.com/codedesignerworld/">
           	@codedesignerworld</a><br>
           	Code is Available on <b>
           	<a class="link" href="https://github.com/codedesignerworld">Github</a>
           </b></p>
           <a class="btn" href="#" type="button">Know More</a>
         </div>
       </div>
    </div>
 </div>
  
</body>
</html>

style.css

body{
  display:flex;
  margin:0;
  padding:0;
  min-height: 100vh;
  background-color: #E2ECF4;
  justify-content: center;
  align-items: center;
  font-family: arial;
}
.container{
  width: 750px;
  margin-top: 0px;
  position: relative;
  background-color: #E2ECF4;
  display: flex;
  justify-content: space-between;
  flex-wrap:wrap;
  margin-left: auto;
  margin-right: auto;  
}
.container .card{
  position: relative;
}
.container .card .face{
  width:230px;
  height: 200px;
  transition:.4s; 
}
.container .card .face.face1{
  position: relative;
  background: #222;
  display: flex;
  justify-content: center;
  align-content:center;
  align-items: center;
  z-index: 1;
  transform: translateY(100px);
}
.container .card:hover .card1{
  transform: translateY(0);
  box-shadow: 0 0 50px #0097F6;
  background-color: #0097F6;   
}
.container .card:hover .card2{
  transform: translateY(0);
  box-shadow: 0 0 50px #943DF6;
  background-color: #943DF6;   
}
.container .card:hover .card3{
  transform: translateY(0);
  box-shadow: 0 0 50px #F7DB4D;
  background-color: #F7DB4D;   
}
.container .card .face.face1 .content{
  opacity: .2;
  transition:  0.5s;
  text-align: center;
}
.container .card:hover .face.face1 .content{
  opacity: 1; 
}
.container .card .face.face1 .content i{
  font-size: 3em;
  color: white;
  display: inline-block;   
}
.container .card .face.face1 .content h3{
  font-size: 1em;
  color: white;
  text-align: center;
}
.container .card .face.face1 .content a{
   transition: .5s;
}
.container .card .face.face2{
   position: relative;
   background: whitesmoke;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 20px 50px rgba(0,0,0,.8);
  transform: translateY(-100px);
}
.container .card:hover .face.face2{
    transform: translateY(0);
}
.container .card .face.face2 .content p, a{
  font-size: 10pt;
  margin: 0 ;
  line-height: 22px;    
  text-decoration: none;
  padding: 0;
  color:#333;
}
.container .card .face.face2 .content .link{
  color:#00c;
}
.container .card .face.face2 .content .btn{
  text-decoration:none;
  color: black;
  box-sizing: border-box;
  outline : 1px double #333;
  padding: 10px;
  margin: 15px 0 0;
  display: inline-block;
}
.container .card .face.face2 .content .btn:hover{
  background: #333 ;
  color: whitesmoke; 
  box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
}

Code is Available on Github.Β Click Here!

Hope you like this blog!

If you like it, please Comment And share it with your friends!

Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there πŸ‘‹ It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply