Hello friends, I hope you are well. In this blog post, you will learn how to make an amazing css image hover effect by using only HTML & CSS.
To create this CSS Image hover Effect using HTML, CSS. Follow these steps:
- Create a new folder and name it whatever you want, then create two files inside this folder as follow.
- Create an
index.htmlfile. - Create a
style.cssfile.
- Now past this code into your
index.htmlfile.
<!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">
</head>
<body>
<div class="images-container">
<div class="image-card"><img src="1.jpg" alt=""></div>
<div class="image-card"><img src="2.jpg" alt=""></div>
<div class="image-card"><img src="3.jpg" alt=""></div>
<div class="image-card"><img src="4.jpg" alt=""></div>
</div>
</body>
</html>
- then past this code into your style.css file.
*{
margin: 0;
padding: 0;
}
body{
min-height: 100vh;
background-color: #596275;
display: flex;
align-items: center;
justify-content: center;
}
.images-container{
display: flex;
}
.image-card{
width: 240px;
height: 360px;
overflow: hidden;
position: relative;
cursor: pointer;
border-radius: 6px;
box-shadow: -6px 6px 20px #00000070;
transition: .3s linear;
}
.image-card img{
width: 100%;
}
.image-card:not(:first-child){
margin-left: -50px;
}
.image-card:hover{
transform: translateY(-24px);
}
.image-card:hover ~ .image-card{
transform: translateX(60px);
}
Download Source Code From Here
Na wa o dark you are amazing
ReplyDelete