Card image Hover Effect | hover on image effect | more content on hover

 Card Hover Effect | hover on image effect | more content on hover





Welcome🎉 to Code With Random blog. In this blog, we learn that how we how to create Card image Hover Effect . We use HTML & CSS  for this Card image Hover Effect. Hope you enjoy our blog so let’s start with a basic HTML structure for Card image Hover Effect .

HTML code for Card Hover Effect 

 <!DOCTYPE html>  
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="card">
<img src="main.jpg" alt="">
<div class="content">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis quas ullam vel fugiat soluta? Doloremque, quod vel? Delectus dignissimos voluptatem dolorem amet, voluptatibus iste asperiores! In tempore deserunt vero eaque.</p>
</div>
</div>
</body>
</html>

There is all HTML code for the Card image Hover Effect  . Now, you can see output without CSS, then we write CSS for our Card image Hover Effect .


 @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');  
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.card{
width: 300px;
height: 225px;
background: rgb(0, 87, 128);
position: relative;
border-radius: 20px;
cursor: pointer;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.123);
}
.card img{
position: absolute;
width: 100%;
border-radius: 10px;
}
.content{
position: absolute;
width: 100%;
bottom: 0;
height: 50px;
padding: 0.4em 1.5em;
font-size: 14px;
background: rgba(255, 255, 255, 0);
backdrop-filter: blur(10px);
border-radius: 10px;
transform: scale(0.9);
color: white;
border: 1px solid rgba(255, 255, 255, 0.164);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.144);
overflow: hidden;
transition: all .4s;
}
.content p{
font-size: 0.8em;
}
.card:hover .content{
height: 150px;
}

Now we have completed our CSS section,  Here is our updated output CSS.



 Hope you like Card image Hover Effect, you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

Check it more

HTML – CSS project ideas by Code With Random

calculator Html javascript | calculator javascript code

bootstrap navbar – responsive  bootstrap navbar 

notification CSS style | Html top bar slide down notification CSS

CSS responsive menu | CSS animated Menu

countdown timer HTML javascript | free countdown timer

A Custom checkbox in CSS? | Create a custom checkbox using CSS?


In this post, we learn how to create a Card image Hover Effect using simple HTML & CSS . If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Share on:

Leave a Comment