Introduction
In this article, I going to explain how to develop a Border Animation and Hover Effect in Bootstrap.
In this project, you will need to insert a Script link inside the head tag and styles along with HTML code. Just follow the steps to see how to create this Animation Border Effect.
CSS Link
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
JS, Popper.js, and jQuery Link
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384 J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Step 1. Open a Sublime text editor.
Border Animation
Border animations are an awesome effect design used in your web page project. If you develop a website with lots of photos, border effects like this will come in handy. The given animation is an easy-to-understand coding concept, so don't worry about the page processing speed. The simple CSS structure of this design makes it fit easily into a web page.
Step 2. You need to insert the following code to create the Animation Border and Hover effect in your project.
Internal style sheet
* {
margin: 0;
padding: 0;
}
.container {
padding-top: 20px;
padding-bottom: 20px;
}
body {
background-color: #111845;
}
.background-img {
background-image: url("https://3.bp.blogspot.com/-piZWCW2uUbg/W2fPXxkWZgI/AAAAAAAAOu0/eydmMjTIqcwLMHEEr2H7imqoRTxMw4o9QCLcBGAs/s1600/among_trees_night_dribbble.png");
height: 400px;
width: 800px;
background-repeat: no-repeat;
background-size: cover;
margin: 5% auto;
padding: 20px;
border: 1px solid #2a3cad;
border-radius: 4px;
box-shadow: 0px 0px 5px #2a3cad;
position: relative;
}
.content h2 {
font-size: 19px;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
background: #111845a6;
box-sizing: border-box;
overflow: hidden;
box-shadow: 0 20px 50px rgb(23, 32, 90);
border: 2px solid #2a3cad;
color: white;
padding: 20px;
}
.box:before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
transition: 0.5s;
pointer-events: none;
}
.box:hover:before {
left: -50%;
transform: skewX(-5deg);
}
.box .content {
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border: 1px solid #f0a591;
padding: 20px;
text-align: center;
box-shadow: 0 5px 10px rgba(9, 0, 0, 0.5);
}
.box span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
box-sizing: border-box;
}
.box span:nth-child(1) {
transform: rotate(0deg);
}
.box span:nth-child(2) {
transform: rotate(90deg);
}
.box span:nth-child(3) {
transform: rotate(180deg);
}
.box span:nth-child(4) {
transform: rotate(270deg);
}
.box span:before {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: #50dfdb;
animation: animate 4s linear infinite;
}
@keyframes animate {
0% {
transform: scaleX(0);
transform-origin: left;
}
50% {
transform: scaleX(1);
transform-origin: left;
}
50.1% {
transform: scaleX(1);
transform-origin: right;
}
100% {
transform: scaleX(0);
transform-origin: right;
}
}
Step 3. The bootstrap code below shows how to complete code for the Animation and hover effect.
<div class="container">
<div class="background-img">
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
<div class="content">
<h2>PRABAKARAN ACT</h2>
<p>
<a href="http://www.cakecounter.com/" style="color:#00ffe9;" target="_blank">
All our modules are designed to play nicely with responsive of course. At the end of the day it comes down to the theme you use - our code doesn't get in your way.
</a>
</p>
</div>
</div>
</div>
</div>
Output for the Animation and hover effect are shown in the below template.
![Animation and hover effect]()
Step 4. Insert the following code to develop the Animation Hover effect within your project.
<div class="col-lg-12 col-md-6">
<div class="container">
<div class="background-img">
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
<div class="col-lg-4 col-md-6">
<h2></h2>
<p style="color:#00ffe9;" target="_blank">
<img src="<?php bloginfo('template_directory');?>/assets/img/praba.jpg" class="img-fluid" alt="PRABAKARAN ACT">
<b style="color: white;">AUTHOR</b>
<a href="https://www.c-sharpcorner.com/members/praba-karan48">Corner</a>
<marquee>
<hr>
<i style="color: black;"></i>
</marquee>
<b style="color: yellow;">GAME DEVELOPER</b>
</p>
</div>
In this article, you will learn about an adventure car race using Native Platform in Gdevelop.
</div>
</div>
</div>
</div>
Output Animation Hover Effect
Right-click on the sublime text window stage, a dialog box appears, select -> open a new browser.
You must have the Firebox browser on your PC. You will see the Animation Border Effect as we run the application in the browser.
![Animation Border Effect]()
Conclusion
I hope you understood this article. We developed an animation border and hover effect in bootstrap. Thanks for reading.