In this topic,
We are going to see how to create border shape hover animation.
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 class="hide-button-col">
<div class="dimond-icon new-icon facebook-icon"><a href="#"><i class="fab fa-facebook-f"></i></i></a></div>
<div class="same-icon new-icon twitter-icon"><a href="#"><i class="fab fa-twitter"></i></a></div>
<div class="same-icon new-icon linkedin-icon"><a href="#"><i class="fab fa-linkedin-in"></i></a></div>
<div class="dimond-icon new-icon instagram-icon"><a href="#"><i class="fab fa-instagram"></i></a></div>
</div>
</div>
<div class="animation-hide-col">
<div class="hide-div">
<h4>Test</h4>
<p>Test Web</p>
</div>
</div>
</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 class="hide-button-col">
<div class="dimond-icon new-icon facebook-icon"><a href="#"><i class="fab fa-facebook-f"></i></i></a></div>
<div class="same-icon new-icon twitter-icon"><a href="#"><i class="fab fa-twitter"></i></a></div>
<div class="same-icon new-icon linkedin-icon"><a href="#"><i class="fab fa-linkedin-in"></i></a></div>
<div class="dimond-icon new-icon instagram-icon"><a href="#"><i class="fab fa-instagram"></i></a></div>
</div>
</div>
<div class="animation-hide-col">
<div class="hide-div">
<h4>Test</h4>
<p>Test Web</p>
</div>
</div>
</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 class="hide-button-col">
<div class="dimond-icon new-icon facebook-icon"><a href="#"><i class="fab fa-facebook-f"></i></i></a></div>
<div class="same-icon new-icon twitter-icon"><a href="#"><i class="fab fa-twitter"></i></a></div>
<div class="same-icon new-icon linkedin-icon"><a href="#"><i class="fab fa-linkedin-in"></i></a></div>
<div class="dimond-icon new-icon instagram-icon"><a href="#"><i class="fab fa-instagram"></i></a></div>
</div>
</div>
<div class="animation-hide-col">
<div class="hide-div">
<h4>Test</h4>
<p>Test Web</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Step-2: Add CSS Code in the <style>…</style> on the index.html file.
body{
margin: 0;
}
.hover-section-col{
display: flex;
flex-wrap: wrap;
margin: 0px -15px;
}
.animation-hover-box{
width: 33.33%;
padding: 0px 30px;
}
.animation-hover-box-image:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 0;
border-bottom: 0px solid #301e1e;
border-right: 0px solid transparent;
opacity: 0.5;
transition: all 0.5s ease 0s;
}
.animation-hover-box-image:before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-top: 0px solid #a7a7a7;
border-left: 0px solid transparent;
opacity: 0.5;
z-index: 1;
transition: all 0.5s ease 0s;
}
.animation-hover-box-image-col:hover .animation-hover-box-image:before{
border-top: 340px solid #a7a7a7;
border-left: 340px solid transparent;
}
.animation-hover-box-image-col:hover .animation-hover-box-image:after{
border-bottom: 340px solid #301e1e;
border-right: 340px solid transparent;
}
.main-hover-section {
background-color: #e9e9e9;
padding: 50px 15px;
}
.animation-hover-box-image img{
position: relative;
}
.animation-hover-box-image, .animation-hover-box-image-col{
position: relative;
}
.hide-button-col .new-icon {
padding: 10px;
}
.hide-button-col .new-icon a{
padding: 10px;
width: 40px;
text-align: center;
position: relative;
}
.hide-button-col .new-icon a:after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 0%;
background-color: #000;
border-radius: 0px 50% 50%;
opacity: 0.5;
transition: all 0.5s ease 0s;
}
.hide-button-col .new-icon:hover a:after{
transform: rotate(180deg);
}
.animation-hover-box-image-col:hover .hide-button-col .new-icon a:after{
width: 100%;
height: 100%;
}
.hide-button-col .new-icon a i{
color: #000;
}
.hide-div {
background: #fff;
padding: 15px;
text-align: center;
position: relative;
}
.hide-button-col {
display: flex;
justify-content: space-around;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
visibility: hidden;
}
.animation-hover-box-image-col:hover .hide-button-col{
visibility: visible;
}
In this animation, I have set a border on the image “:after” and “:before”.
by default I have set “border-top: 0px solid #a7a7a7”, and “border-left: 0px solid transparent” on the image “:before”, and I have set “border-bottom: 0px solid #301e1e”, and “border-right:0px solid transparent” on the image “:after”.
I have set “border-top: 340px solid #a7a7a7”, and “border-left: 340px solid transparent” on the image box hover, and I have set “border-bottom: 340px solid #301e1e”, and “border-right:340px solid transparent” on the image box hover.
Review the below video.
