Images hover effect with html and css
Sunday, August 16, 2020
1 Comment
Images hover effect
Do you love to make css degine. we will help you to go the rich. Today you learn how to make hover effect on images. If you won't have any laptop or desktop computer.
Don't worry, I know you have an smartphone. We write a blog about Html and css coding application for smartphone.
so lets lets cheak those code:
HTML
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Clip-Path Hover Effects</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="box">
<div class="imgBx">
<img src="/image/img1.jpg">
</div>
<div class="content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#">Read More</a>
</div>
</div>
<div class="box">
<div class="imgBx">
<img src="/image/img2.jpg">
</div>
<div class="content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#">Read More</a>
</div>
</div>
<div class="box">
<div class="imgBx">
<img src="/image/img3.jpg">
</div>
<div class="content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#">Read More</a>
</div>
</div>
<div class="box">
<div class="imgBx">
<img src="/image/img4.jpg">
</div>
<div class="content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#">Read More</a>
</div>
</div>
</div>
</body>
</html>
______________________________________
CSS
body
{
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: consolas;
}
.container
{
position: relative;
width: 1200px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.container .box
{
position: relative;
width: 280px;
height: 400px;
margin: 20px 0;
box-sizing: border-box;
overflow: hidden;
}
.container .box .imgBx
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
clip-path: circle(400px at center 100px);
transition: 0.5s;
transition-delay: 0.5s;
}
.container .box:hover .imgBx
{
clip-path: circle(80px at center 100px);
transition-delay: 0s;
}
.container .box .imgBx img
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.container .box .content
{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 55%;
padding: 20px;
box-sizing: border-box;
text-align: center;
}
.container .box .content h2
{
margin: 0;
padding: 0;
}
.container .box .content a
{
text-decoration: none;
background: #000;
color: #fff;
padding: 5px;
display: inline-block;
}
.container .box .content h2,
.container .box .content p,
.container .box .content a
{
opacity: 0;
transition: 0.5s;
transform: translateY(20px);
}
.container .box:hover .content h2
{
opacity: 1;
transform: translateY(0);
transition-delay: 0.5s
}
.container .box:hover .content p
{
opacity: 1;
transform: translateY(0);
transition-delay: 0.7s
}
.container .box:hover .content a
{
opacity: 1;
transform: translateY(0);
transition-delay: 0.9s
}
______________________________________
Related Posts
Subscribe Our Newsletter
This is a given, and this is why picking a longboard is extremely important, and is arguably the most important first step to longboarding. More about the author
ReplyDelete