How to Create a Border Animation and Hover Effect in Bootstrap

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
  1. <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

  1. <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>  
  2. <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>  
  3. <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

  1. <style >  
  2.     
  3. *{  
  4.   margin:0;  
  5.   padding:0;  
  6. }  
  7.   
  8. .container{  padding-top20px;  
  9.   padding-bottom20px;}  
  10. body{  
  11.   background-color#111845;  
  12. }  
  13.   
  14. .background-img{  
  15.   background-imageurl("https://3.bp.blogspot.com/-piZWCW2uUbg/W2fPXxkWZgI/AAAAAAAAOu0/eydmMjTIqcwLMHEEr2H7imqoRTxMw4o9QCLcBGAs/s1600/among_trees_night_dribbble.png");  
  16. height400px;  
  17.   width800px;  
  18.   background-repeatno-repeat;  
  19.   background-size: cover;  
  20.   margin5% auto;  
  21.   padding:20px;  
  22.   border1px solid #2a3cad;  
  23.   border-radius: 4px;  
  24.   box-shadow: 0px 0px 5px #2a3cad;  
  25.   positionrelative;  
  26. }  
  27.   
  28. .content h2font-size:19px;}  
  29.   
  30. .box{  
  31.   positionabsolute;  
  32.   top: 50%;  
  33.   left: 50%;  
  34.   transform: translate(-50%-50%);  
  35.   width300px;  
  36.   height300px;  
  37.   background#111845a6;  
  38.   box-sizing: border-box;  
  39.   overflowhidden;  
  40.   box-shadow: 0 20px 50px rgb(233290);  
  41.   border2px solid #2a3cad;  
  42.   colorwhite;  
  43.   padding20px;  
  44. }  
  45.   
  46. .box:before{  
  47.   content'';  
  48.   position:absolute;  
  49.   top:0;  
  50.   left:-100%;  
  51.   width:100%;  
  52.   height:100%;  
  53.   background: rgba(255,255,255,0.1);  
  54.   transition:0.5s;  
  55.   pointer-events: none;  
  56. }  
  57.   
  58. .box:hover:before{  
  59.   left:-50%;  
  60.   transform: skewX(-5deg);  
  61. }  
  62.   
  63.   
  64. .box .content{  
  65.   position:absolute;  
  66.   top:15px;  
  67.   left:15px;  
  68.   right:15px;  
  69.   bottom:15px;  
  70.   border:1px solid #f0a591;  
  71.   padding:20px;  
  72.   text-align:center;  
  73.   box-shadow: 0 5px 10px rgba(9,0,0,0.5);  
  74.     
  75. }  
  76.   
  77. .box span{  
  78.   positionabsolute;  
  79.   top: 0;  
  80.   left: 0;  
  81.   width100%;  
  82.   height100%;  
  83.   displayblock;  
  84.   box-sizing: border-box;  
  85.     
  86. }  
  87.   
  88. .box span:nth-child(1)  
  89. {  
  90.   transform:rotate(0deg);  
  91. }  
  92.   
  93. .box span:nth-child(2)  
  94. {  
  95.   transform:rotate(90deg);  
  96. }  
  97.   
  98. .box span:nth-child(3)  
  99. {  
  100.   transform:rotate(180deg);  
  101. }  
  102.   
  103. .box span:nth-child(4)  
  104. {  
  105.   transform:rotate(270deg);  
  106. }  
  107.   
  108. .box span:before  
  109. {  
  110.   content'';  
  111.   positionabsolute;  
  112.   width:100%;  
  113.   height2px;  
  114.   background#50dfdb;  
  115.   animation: animate 4s linear infinite;  
  116. }  
  117.   
  118. @keyframes animate {  
  119.   0% {  
  120.   transform:scaleX(0);  
  121.   transform-origin: left;  
  122.   }  
  123.   50%  
  124.   {  
  125.     transform:scaleX(1);  
  126.   transform-origin: left;  
  127.   }  
  128.   50.1%  
  129.   {  
  130.     transform:scaleX(1);  
  131.   transform-origin: right;  
  132.       
  133.   }  
  134.     
  135.   100%  
  136.   {  
  137.     transform:scaleX(0);  
  138.   transform-origin: right;  
  139.       
  140.   }    
  141. }   
  142.   
  143. </style> 
Step 3
 
The bootstrap code below shows how to complete code for the Animation and hover effect.
  1. <div class="container">  
  2.   <div class="background-img">  
  3.     <div class="box">  
  4.       <span></span>  
  5.       <span></span>  
  6.       <span></span>  
  7.       <span></span>  
  8.       <div class="content">  
  9.         <h2>PRABAKARAN ACT </h2>  
  10.         <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>  
  11.       </div>  
  12.         
  13.     </div>  
  14.   </div>  
  15. </div> 
Output for the Animation and hover effect are shown in the below template:
 
 
Step 4
 
Insert the following code to develop the Animation Hover effect within your project:
  1. <div class="col-lg-12 col-md-6" >   
  2.  <div class="container">  
  3.    <div class="background-img">  
  4.      <div class="box">  
  5.        <span></span>  
  6.        <span></span>  
  7.        <span></span>  
  8.        <span></span>  
  9.          
  10.                  <div class="col-lg-4 col-md-6" >   
  11.               
  12.          <h2>  </h2>  
  13.         <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>  </P><b style="color: yellow;">GAME DEVELOPER</b> </marquee>   
  14.    </div> In this article, you will learn about an adventure car race using Native Platform in Gdevelop.</div>  
  15.   
  16.        </div>      
  17.      </div>  
  18. </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. 
 
 

Conclusion

 
I hope you understood this article. We developed an animation border and hover effect in bootstrap. Thanks for reading.