Introduction
Here today we are going to make CSS card with hover effect with the help of HTML and CSS by following their simple and easy code that can be understood by everyone, whether a fresher or an experienced person. In this card, there will be an image, and when the user hovers on that card, the details of the image will appear. This is very useful, as you can use it to store your images or use it on your websites.
Now let’s start making this image card together by following the simple code step by step. You just need to focus carefully on the code. I hope you will understand it, and if you have any problems related to the code, you can contact us by following us on the social media link given below.
HTML
First, we will create the structure of this card with hover effect with the help of HTML. In this, we will first make a parent div in which all the images will be, and then child divs for the card section. In the card section, we will set the images in every child div, and then we will write their information, like their name and some lines about the image in the paragraph tag and the title of the image in the heading tag. At the end, we will also add a button in the button tag to read more about the image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="box">
<div class="imgBox">
<img src="https://images.pexels.com/photos/938639/pexels-photo-938639.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
</div>
<div class="content">
<h2>Aman Rajput</br>
<span>Graphic Designer</span></h2>
</div>
</div>
<div class="box">
<div class="imgBox">
<img src="https://images.pexels.com/photos/1844012/pexels-photo-1844012.jpeg?auto=compress&cs=tinysrgb&w=600">
</div>
<div class="content">
<h2>Shivani Sharma</br>
<span>Digital Marketing</span></h2>
</div>
</div>
<div class="box">
<div class="imgBox">
<img src="https://images.pexels.com/photos/2085739/pexels-photo-2085739.jpeg?auto=compress&cs=tinysrgb&w=600">
</div>
<div class="content">
<h2>Rohan Gupta</br>
<span>Chartered Accountant C.A</span></h2>
</div>
</div>
</div>
</body>
</html>CSS
After making the structure of the card with hover effect, we will now add some style to the card and also give it a hovering effect with the help of CSS (an external stylesheet attached to the html file used to give styling to the html elements and make the website responsive). In this, we will first make the background black, then take the parent div of the card to the center of the screen, and then move toward the image card.
In which we will set the position and size of the image and then give styling to the text written on the image about them, like color,size, etc., and then we will style the button and set its position. Now we will give it a hovering effect in which written text will be hidden in the default case, and when the user hovers on the image, their information will appear with some transition effect and also the scale property to increase the size of the card.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap");
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
width: 100vw;
min-height: 100vh;
background-color: #050505;
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.container .box {
position: relative;
width: 30rem;
height: 30rem;
margin: 4rem;
}
.container .box:hover .imgBox {
transform: translate(-3.5rem, -3.5rem);
}
.container .box:hover .content {
transform: translate(3.5rem, 3.5rem);
}
.imgBox {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
transition: all 0.5s ease-in-out;
}
.imgBox img {
width: 30rem;
height: 30rem;
object-fit: cover;
resize: both;
border-radius: 25px
}
.content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 1.5rem;
display: flex;
justify-content: center;
background-color: #fff;
z-index: 1;
align-items: flex-end;
text-align: center;
transition: 0.5s ease-in-out;
border-radius: 25px
}
.content h2 {
display: block;
font-size: 2rem;
color: #111;
font-weight: 500;
line-height: 2rem;
letter-spacing: 1px;
}
.content span {
color: #555;
font-size: 1.4rem;
font-weight: 300;
letter-spacing: 2px;
}
@media (max-width: 600px) {
.container .box:hover .content {
transform: translate(0, 3.5rem);
}
.container .box:hover .imgBox {
transform: translate(0, -3.5rem);
}
}
/*# sourceMappingURL=main.css.map */Finally, we made the structure of CSS card with hover effect by following the simple code of HTML and CSS. You can also make such a card by taking ideas from here; it will help you, or you can make changes in our code and then copy and paste this in your system. Given below is the button to download the source code.
For more explanation, click on the link given below to watch the video.
You can also check Poster Card
