CSS Card Hover Effect. Today in this blog, we gonna learn about CSS Card Hover Effect for Beginners.
CSS Card Hover Effect
Hi Friends!
Today in this blog, we gonna learn about CSS Card Hover Effect for Beginners. CSS Card Hover Effect is one of the best CSS effects. I already uploaded some button effects if you're a beginner let's go and learn it.
This Card Hover Effect is very nice to see. In the previous blog, we will learn about CSS Shiny Button Effect For Beginners if you're a beginner I will recommend learning that button effect first. If you learn that and this blog will help you to learn about Card Hover Effect. In this blog, I will give my video tutorial and source codes to download. if you have any doubts ask me in the comment section.
HTML file
[
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css card hover effect</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div>
<img src="house1.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio recusandae esse sapiente quas ullam natus laborum eaque illum soluta amet ipsum dolorem eos, nisi earum laudantium modi doloremque similique quisquam.
<br>
<span>Read more</span>
</p>
</div>
<div>
<img src="house2.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio recusandae esse sapiente quas ullam natus laborum eaque illum soluta amet ipsum dolorem eos, nisi earum laudantium modi doloremque similique quisquam.
<br>
<span>Read more</span>
</p>
</div>
<div>
<img src="house3.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio recusandae esse sapiente quas ullam natus laborum eaque illum soluta amet ipsum dolorem eos, nisi earum laudantium modi doloremque similique quisquam.
<br>
<span>Read more</span>
</p>
</div>
</body>
</html>
]
You can copy this HTML file. and paste it into your HTML file. Now you will learn it clearly. and don't forget to save the file with an extension. HTML. This extension is more important for creating a website page.
CSS file
[
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: space-around;
align-items: center;
height: 100vh;
width: 100%;
background-color: #262626FF;
}
div{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
height: 350px;
width: 300px;
font-size: 17px;
font-family: sans-serif;
color: white;
border-radius: 20px;
box-shadow: 1px 1px 60px black;
cursor: pointer;
overflow: hidden;
}
img{
position: absolute;
width: 250px;
height: 200px;
}
p{
position: absolute;
padding: 10px 20px;
top: 100%;
}
div:hover{
transition: 0.4s;
bottom: 5%;
}
div:hover img{
transition: 0.5s;
top: 5%;
height: 100px;
width: 100px;
border-radius: 50%;
}
div:hover p{
transition: 0.7s;
top: 35%;
}
span{
float: right;
margin: 10px;
padding: 5px;
font-weight: bold;
border: 2px solid white;
border-radius: 5px;
}
span:hover{
background-color: white;
color: black;
}
]
Secondly, you can copy this CSS file. and paste it into your CSS file. and remember the file extension called. CSS. This will help you to design your webpage. If you want more clarity on this topic you can watch my video tutorial and If you have any doubts ask me in the comment section.
Video Tutorial
Watch this video fully and learn the all card effects to create your own Card Hover Effects. repeat the code for your practice this will help you to learn this Card Hover Effect more effectively and This video is also helpful to learn faster. colourful Card Hover Effects are one of my favorite CSS effects. I hope this tutorial will be helpful for learning Card Hover Effect for beginners. I will give you Source Code and you can download it.
COMMENTS