<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="image-column-1"> <div class="border-eff"> <div class="inner"> <a href="#" title="Static Image"> <img src="https://www.orioninfosolutions.com/assets/img/skills.jpg" alt="" style=""> </a> </div> </div> </div> </div> </div>

*{ outline:none; overflow-x:hidden; } .border-eff { position: relative; } .border-eff:before, .border-eff:after { content: ""; position: absolute; width: 0; height: 3px; background: #fff; transition: 0.3s ease-in-out; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; -ms-transition: 0.3s ease-in-out; z-index: 9; } .border-eff:before { top: 0; left: 0; } .border-eff:after { bottom: 0; right: 0; } .border-eff .inner:before, .border-eff .inner:after { content: ""; position: absolute; height: 0; width: 3px; background: #fff; transition: 0.3s ease-in-out; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; -ms-transition: 0.3s ease-in-out; z-index: 9; transition-delay: 0.3s; } .border-eff .inner:before { bottom: 0; left: 0; } .border-eff .inner:after { top: 0; right: 0; } .border-eff:hover:before, .border-eff:hover:after { width: 100%; background: #009788; } .border-eff:hover .inner:before, .border-eff:hover .inner:after { height: 100%; background: #009788; }