CSS hover effect awesome look |
CSS hover effect awesome look |
Create awesome looking hover effect in your website. Download the Practice file code below:
अपनी वैबसाइट मे hover effect से बहतरीन लूक देने के लिए HTML ओर CSS के practice code यहाँ से download कर सकते हैं।
HTML Code File Download: Click Here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset ="UTF-8">
<title>Image Hover Effects</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="box">
<img src="rahul.png">
</div>
<div class="box">
<img src="rohit.png">
</div>
<div class="box">
<img src="sachin.png">
</div>
</body>
</html>
CSS Code File Download: Click here
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
display:flex;
justify-content:center;
align-items:center;
min-height:100px;
background:yellow;
}
.container{
position:relative;
display:flex;
-webkit-box-reflect:below 1px linear-gradient(transparent, transparent, transparent, #0004);
}
.container .box{
position:relative;
width:320px;
height:420px;
background:#444;
margin:0 20px;
margin-top:50px;
border-radius:20px;
background:linear-gradient(45deg, #2da2ff 25%, #444 25%, #444 50%, #2da2ff 50%, #2da2ff 75%, #444 75%, #444 100%);
background-size:40px 40px;
filter:grayscale(1);
animation:animateBg 0.5s linear infinite;
animation-play-state:paused;
transition:filter 1s;
display:flex;
justify-content:center;
}
.container .box:nth-child(2){
background:linear-gradient(135deg, #ff61ae 25%, #444 25%, #444 50%, #ff61ae 50%, #ff61ae 75%, #444 75%, #444 100%);
background-size:40px 40px;
}
.container .box:hover{
animation-play-state:running;
filter:grayscale(0);
}
@keyframes animateBg{
0%
{
background-position:0;
}
{
background-position:40px;
}
}
.container .box img{
position:absolute;
bottom:0;
height:90%;
transition:height 0.5s;
}
.container .box:hover img{
height:480px;
}
Post a Comment