In this topic,
We are going to see how to create 3d border animation on a hover.
Step-1: Create Html Code in the index.html file.
<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-04.jpg" alt="face-one" height="300" width="300">
</div>
<div class="animation-hide-col">
<div class="hide-div">
<h4>Test</h4>
<p>Test Web</p>
<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>
</div>
</div>
<div class="animation-hover-box">
<div class="animation-hover-box-image-col">
<div class="animation-hover-box-image">
<img src="image/face-04.jpg" alt="face-one" height="300" width="300">
</div>
<div class="animation-hide-col">
<div class="hide-div">
<h4>Test</h4>
<p>Test Web</p>
<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>
</div>
</div>
<div class="animation-hover-box">
<div class="animation-hover-box-image-col">
<div class="animation-hover-box-image">
<img src="image/face-04.jpg" alt="face-one" height="300" width="300">
</div>
<div class="animation-hide-col">
<div class="hide-div">
<h4>Test</h4>
<p>Test Web</p>
<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>
</div>
</div>
</div>
</div>
</div>
</div>
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 50px;
}
.main-hover-section {
background-color: #e9e9e9;
padding: 50px 15px;
}
.animation-hover-box-image img{
border-radius: 7px;
border: 2px solid #fff;
position: relative;
}
.animation-hover-box-image-col:after{
content: '';
position: absolute;
top: 50%;
border-left: 8px solid #000;
height: 35%;
left: -8px;
right: auto;
transform: translateY(-50%);
transition: all 0.5s ease 0s;
}
.animation-hover-box-image-col:before{
content: '';
position: absolute;
top: 50%;
border-right: 8px solid #000;
height: 35%;
right: -8px;
left: auto;
transform: translateY(-50%);
transition: all 0.5s ease 0s;
}
.animation-hover-box-image, .animation-hover-box-image-col{
position: relative;
}
.animation-hover-box-image:after{
content: '';
position: absolute;
}
.animation-hover-box-image:after {
content: '';
position: absolute;
bottom: -8px;
border: 4px solid #000;
width: 35%;
left: 50%;
right: auto;
transform: translateX(-50%);
transition: all 0.5s ease 0s;
}
.animation-hover-box-image:before {
content: '';
position: absolute;
top: -8px;
border: 4px solid #000;
width: 35%;
left: 50%;
right: auto;
transform: translateX(-50%);
transition: all 0.5s ease 0s;
}
.animation-hover-box:hover .animation-hover-box-image-col:after,
.animation-hover-box:hover .animation-hover-box-image-col:before{
height: 70%;
}
.animation-hover-box:hover .animation-hover-box-image:after,
.animation-hover-box:hover .animation-hover-box-image:before{
width: 70%;
}
.animation-hide-col {
position: absolute;
bottom: 15px;
width: 100%;
left: 50%;
transform: translateX(-50%);
}
.hide-div {
background: #fff;
padding: 15px;
text-align: center;
width: 160px;
margin: 0 auto;
position: relative;
}
.hide-button-col {
display: flex;
justify-content: space-around;
}
In this animation, I have set a border on the box and image “:after” and “:before”.
I have set by default the border width and height to “35%”, and on hover, I have set the border width and height to “70%”.
Review the below video.
