In this topic,
We are going to see how to create up-and-down animation on hover.
Step-1: Create Html Code in the index.html file.
<body>
<div class="main-hover-section">
<div class="main-hover-inner-section container">
<div class="hover-section-row">
<div class="hover-section-col">
<div class="animation-hover-box">
<div class="animation-hover-box-image-col">
<div class="animation-hover-box-image">
<img src="image/face-01.jpg" alt="face-one" height="300" width="300">
</div>
<div class="animation-hide-col">
<div class="hide-button-col">
<span><a href="#"><i class="fab fa-facebook-f"></i></i></a></span>
<span><a href="#"><i class="fab fa-twitter"></i></a></span>
<span><a href="#"><i class="fab fa-linkedin-in"></i></a></span>
<span><a href="#"><i class="fab fa-instagram"></i></a></span>
</div>
</div>
</div>
<div class="animation-hover-box-content">
<div class="name-with-occupation">
<span class="name-text">Williamson</span> <span class="hover-divider"> | </span> <span class="occupation-text"> Web Devloper</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<p>
<a href="#">Read More</a>
</div>
</div>
<div class="animation-hover-box">
<div class="animation-hover-box-image-col">
<div class="animation-hover-box-image">
<img src="image/face-01.jpg" alt="face-one" height="300" width="300">
</div>
<div class="animation-hide-col">
<div class="hide-button-col">
<span><a href="#"><i class="fab fa-facebook-f"></i></i></a></span>
<span><a href="#"><i class="fab fa-twitter"></i></a></span>
<span><a href="#"><i class="fab fa-linkedin-in"></i></a></span>
<span><a href="#"><i class="fab fa-instagram"></i></a></span>
</div>
</div>
</div>
<div class="animation-hover-box-content">
<div class="name-with-occupation">
<span class="name-text">Williamson</span> <span class="hover-divider"> | </span> <span class="occupation-text"> Web Desginer</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<p>
<a href="#">Read More</a>
</div>
</div>
<div class="animation-hover-box">
<div class="animation-hover-box-image-col">
<div class="animation-hover-box-image">
<img src="image/face-01.jpg" alt="face-one" height="300" width="300">
</div>
<div class="animation-hide-col">
<div class="hide-button-col">
<span><a href="#"><i class="fab fa-facebook-f"></i></i></a></span>
<span><a href="#"><i class="fab fa-twitter"></i></a></span>
<span><a href="#"><i class="fab fa-linkedin-in"></i></a></span>
<span><a href="#"><i class="fab fa-instagram"></i></a></span>
</div>
</div>
</div>
<div class="animation-hover-box-content">
<div class="name-with-occupation">
<span class="name-text">Williamson</span> <span class="hover-divider"> | </span> <span class="occupation-text"> Web Devloper</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<p>
<a href="#">Read More</a>
</div>
</div>
<div class="animation-hover-box">
<div class="animation-hover-box-image-col">
<div class="animation-hover-box-image">
<img src="image/face-01.jpg" alt="face-one" height="300" width="300">
</div>
<div class="animation-hide-col">
<div class="hide-button-col">
<span><a href="#"><i class="fab fa-facebook-f"></i></i></a></span>
<span><a href="#"><i class="fab fa-twitter"></i></a></span>
<span><a href="#"><i class="fab fa-linkedin-in"></i></a></span>
<span><a href="#"><i class="fab fa-instagram"></i></a></span>
</div>
</div>
</div>
<div class="animation-hover-box-content">
<div class="name-with-occupation">
<span class="name-text">Williamson</span> <span class="hover-divider"> | </span> <span class="occupation-text"> Web Desginer</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<p>
<a href="#">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Step-2: Add CSS Code in the <style>…</style> on the index.html file.
body{
margin: 0;
}
.container{
max-width: 1140px;
margin: 0 auto;
}
.hover-section-col{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.animation-hover-box{
width: 25%;
}
.animation-hover-box-image img{
max-width: 100%;
width: auto;
height: auto;
max-height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
}
.animation-hover-box-image {
height: 260px;
border-radius: 50%;
overflow: hidden;
line-height: 260px;
position: relative;
}
.animation-hover-box-image:after{
content: '';
position: absolute;
top:0;
left: 0;
width: 100%;
height: 0%;
background: #42404099;
border-radius: 50%;
transition: all 1s ease 0.5s;
}
.main-hover-section {
background-color: #141718ee;
padding: 50px 15px;
}
.animation-hover-box {
width: 23%;
text-align: center;
}
.animation-hover-box-content {
color: #fff;
font-family: system-ui;
padding-top: 20px;
}
span.name-text {
font-weight: 600;
font-size: 18px;
}
span.hover-divider {
color: #a9d7d1;
padding: 0px 8px;
}
span.occupation-text {
font-size: 14px;
color: #adadad;
}
a {
color: #a9d7d1;
text-decoration: none;
font-style: italic;
}
.hide-button-col{
display: flex;
justify-content: center;
z-index: 99;
transition: all 0.5s ease-in 0.5s;
}
.hide-button-col span {
width: 33px;
height: 33px;
background: #4a4a4a;
margin: 0px 5px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s ease 0s;
}
.hide-button-col span:hover {
background: #a9d7d1;
}
.hide-button-col span:hover a{
color: #ddd;
}
.animation-hover-box-image-col {
position: relative;
}
.animation-hide-col {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left:0;
width: 100%;
transition: all 0.5s ease 0s;
visibility: hidden;
}
.animation-hover-box:hover .animation-hide-col{
visibility: visible;
}
.animation-hover-box:hover .animation-hover-box-image:after{
height: 100%;
}
@media only screen and (max-width: 991px){
.animation-hover-box{
width: 45%;
}
}
@media only screen and (max-width: 767px){
.animation-hover-box{
width: 100%;
padding-bottom: 25px;
}
}
In this animation,
I took a black background in the image box “:after”.
And set by default 0% height. and I have increased the height from 0% to 100% on hover.
Review the below video.
