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

<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;
    }
  }

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

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