In this topic,
We are going to see how to display the Progress bar
Step-1: Add Fonts link for the social icon.
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,700i" rel="stylesheet">
Step-2: 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">
<div class="facebook-icon">
<span><a href="#"><i class="fab fa-facebook-f"></i></i></a></span>
</div>
<div class="instagram-icon">
<span><a href="#"><i class="fab fa-instagram"></i></a></span>
</div>
</div>
</div>
</div>
<div class="animation-hover-box-content">
<div class="name-with-occupation">
<h4 class="name-text">Williamson</h4>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<p>
</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">
<div class="facebook-icon">
<span><a href="#"><i class="fab fa-facebook-f"></i></i></a></span>
</div>
<div class="instagram-icon">
<span><a href="#"><i class="fab fa-instagram"></i></a></span>
</div>
</div>
</div>
</div>
<div class="animation-hover-box-content">
<div class="name-with-occupation">
<h4 class="name-text">Williamson</h4>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<p>
</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">
<div class="facebook-icon">
<span><a href="#"><i class="fab fa-facebook-f"></i></i></a></span>
</div>
<div class="instagram-icon">
<span><a href="#"><i class="fab fa-instagram"></i></a></span>
</div>
</div>
</div>
</div>
<div class="animation-hover-box-content">
<div class="name-with-occupation">
<h4 class="name-text">Williamson</h4>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Step-3: Add CSS Code in the <style>…</style> on the index.html file.
body{
margin: 0;
}
.hover-section-col{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0px -15px;
}
.animation-hover-box{
width: 33.33%;
padding: 0px 15px;
}
.main-hover-section {
background-color: #d9d9d9;
padding: 50px 15px;
}
.animation-hover-box-content {
padding: 25px;
text-align: center;
}
.animation-hover-box-image-col{
position: relative;
}
.animation-hide-col {
position: absolute;
top: 50%;
left: 0;
width: 100%;
}
.animation-hover-box-image {
border-radius: 50%;
overflow: hidden;
border: 6px solid #cbcbcb;
}
h4.name-text {
font-size: 26px;
padding-bottom: 10px;
}
.hide-button-col {
display: flex;
position: relative;
align-items: center;
}
.instagram-icon {
position: absolute;
right: 50%;
top: auto;
border: 6px solid #fff;
border-radius: 50%;
opacity: 0;
transition: all 0.5s ease 0s;
}
.facebook-icon {
position: absolute;
left: 50%;
top: auto;
border: 6px solid #fff;
border-radius: 50%;
opacity: 0;
transition: all 0.5s ease 0s;
}
.facebook-icon a, .instagram-icon a {
padding: 5px;
border-radius: 50%;
background: #ddd;
height: 35px;
width: 35px;
display: flex;
align-items: center;
justify-content: center;
}
.animation-hover-box:hover .instagram-icon {
opacity: 1;
animation: instagram 2s forwards;
}
.animation-hover-box:hover .facebook-icon {
opacity: 1;
animation: facebook 2s forwards;
}
.animation-hover-box:hover .animation-hover-box-image{
border: 6px solid #fff;
}
@keyframes instagram {
0% {
right: 50%;
}
50% {
right: -20px;
}
75% {
right: 0px;
}
100% {
right: -20px;
}
}
@keyframes facebook {
0% {
left: 50%;
}
50% {
left: -20px;
}
75% {
left: 0px;
}
100% {
left: -20px;
}
}
In this animation, On hover, I have set keyframes for icon animation.
For the icon on the left, I set the left to “50%” when the default keyframe position is “0%”. And then I set the left to “-20px” when the keyframe position is “50%”. And then I set the left to “0px” when the keyframe position is “75%”. And then I set the left to “-20px” when the keyframe position is “100%”.
For the icon on the right, I set the right to “50%” when the default keyframe position is “0%”. And then I set the right to “-20px” when the keyframe position is “50%”. And then I set the right to “0px” when the keyframe position is “75%”. And then I set the right to “-20px” when the keyframe position is “100%”.
Review the below video.
