CSS Card Hover Effects

byCodingFlicks -January 19, 2022

0

Hello, friends. In this blog, we will learn how to create animated CSS cards using HTML CSS. Card elements are a useful component of any website. We often see these elements in blog post feed, team section designs, etc. A card element consists of an image followed by a title, description, and a call-to-action button. If we can add CSS animation to the card design, it will look even more attractive. For this reason, we have implemented a nice hover animation with the card design. For a video demonstration, please watch the video below.

I hope you have watched the video demo above and have some idea about what the cards will look like after the coding. You see in the demo how three different boxes are arranged one after the other. When we will hover the cards, the div will expand. We will see the details about the image. You can use these CSS profile cards for your projects.

Each card contains two sides. Side1 is made for images and headers and, side2 is made for details about that image. When we hover over the first, the second side will expand and we will see the rest of the content. The image details are wrapped in a div element with a class name 'img-info'. The 'img-info' div element will contain a title, a paragraph, and a call-to-action button.

First, create a div element called 'card'. Inside that card, create two more div elements with a class name 'side'. Both 'side' div elements will have some common styles. Place a separate class name in each 'side' div element because these two div elements will have different styles. Place all card elements inside a 'Team' div element.

In the CSS part, we will style the body element first. We gave a particular font family and custom background color for the project. After that, I have set a fixed width of 1200px for the 'team' div element. I have also set a fixed width (380x250) for the 'side' div elements. I have implemented CSS transform property for the expanded animation on hover. Initially, the side2 div content will be behind the side2 content. I have given the side1 div a z-index value so that it remains top of the side2 element. At first, the transform value in the y-direction will be 150px. To get the vertical expand animation on hover, I have set the value to zero. The opacity of the side1 element will be 0.2 but, for the hover state, the value will be 1.

You May Also Like:

CSS Card Hover Effects [ Source Code ]:

To create the project, first create one HTML file with a .html extension and one CSS file with a .css extension. Remember to link the external CSS file into your HTML file. After that, please copy the codes from the below code boxes and paste them into your files. If the code doesn't work then, download the code from the download button provided below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--codingflicks.com-->
<head>
    <meta charset="UTF-8">
    <title>CSS Card Hover Effects</title>
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
        <div class="team">
       <div class="card">
          <div class="side side1">
             <div class="img-info">
                <img src="img/1.png">
                <h3>Emma Jones</h3>
             </div>
          </div>
          <div class="side side2">
             <div class="img-info">
               <h2>Short Bio</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam suscipit sequi esse, tenetur amet molestiae, corrupti tempora! Officia cum nobis, tempore perferendis, voluptates laboriosam alias. Lorem ipsum dolor.</p>
                <a href="#">More Info</a>
             </div>
          </div>
       </div>
       <div class="card">
          <div class="side side1">
             <div class="img-info">
                <img src="img/2.png">
                <h3>Josh Wood</h3>
             </div>
          </div>
          <div class="side side2">
             <div class="img-info">
               <h2>Short Bio</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam suscipit sequi esse, tenetur amet molestiae, corrupti tempora! Officia cum nobis, tempore perferendis, voluptates laboriosam alias. Lorem ipsum dolor.</p>
                <a href="#">More Info</a>
             </div>
          </div>
       </div>
       <div class="card">
          <div class="side side1">
             <div class="img-info">
                <img src="img/3.png">
                <h3>Ellie Jones</h3>
             </div>
          </div>
          <div class="side side2">
             <div class="img-info">
               <h2>Short Bio</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam suscipit sequi esse, tenetur amet molestiae, corrupti tempora! Officia cum nobis, tempore perferendis, voluptates laboriosam alias. Lorem ipsum dolor.</p>
                <a href="#">More Info</a>
             </div>
          </div>
       </div>
    </div>
</body>
</html>

ADD CSS:

body{
    font-family: 'Oswald', sans-serif;
    background: bisque;
}
.team {
    display: flex;
	justify-content: space-between;
	margin: 70px auto;
	width: 1200px;
	position: relative;
	
}
    .team .card{
        position: relative;
        cursor: pointer;
        text-align: center
    }
    .team .card .side{
        width: 380px;
        height: 250px;
        transition: 0.5s;
    }
     
    .team .card .side.side1{
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1;
        transform: translateY(100px);
        position: relative;
        background: #333;
        
    }
    .team .card:hover .side.side1{
        background: deepskyblue;
        transform: translateY(0);
    }
    .team .card .side.side2 {
        padding: 20px;
	box-sizing: border-box;
	box-shadow: 0 20px 20px rgba(0, 0, 0, 0.8);
	transform: translateY(-150px);
	position: relative;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	
}
    .team .card:hover .side.side2{
        transform: translateY(0);
    }
     .team .card .side.side2 .img-info h2 {
	margin: 0;
}
    .team .card .side.side2 .img-info p{
        margin: 0;
        padding: 0;
    }
    .team .card .side.side1 .img-info{
        opacity: 0.2;
        transition: 0.5s;
        text-align: center;
    }
     
    .team .card:hover .side.side1 .img-info{
        opacity: 1;
    }
     
    .team .card .side.side1 .img-info img{
        max-width: 100px;
    }
     
    .team .card .side.side1 .img-info h3{
        text-align: center;
        font-size: 1.5em;
        margin: 10px 0 0;
        padding: 0;
        color: #fff;
        
    }
    .team .card .side.side2 .img-info a {
	padding: 5px 15px;
	border-radius: 50px;
	background: deepskyblue;
        color: #fff;
        margin: 20px 0 0;
	display: inline-block;
	text-decoration: none;
	font-weight: 600;
	
}  
    }
    .team .card .side.side2 .img-info a:hover {
	background: deepskyblue;
	color: #fff;
}

I hope you have successfully implemented the code. In this blog, we share front-end-related source code regularly. Please follow us on our social media profiles to stay connected with us. Please share the articles with like-minded people. Thank you for visiting the blog.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.