<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h1 class="text-center">by Sachin</h1> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="sample"> <img src="https://static.pexels.com/photos/33045/lion-wild-africa-african.jpg" alt="sample" /> <span class="top"></span> <span class="right"></span> <span class="bottom"></span> <span class="left"></span> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="sample"> <img src="https://static.pexels.com/photos/33045/lion-wild-africa-african.jpg" alt="sample" /> <span class="top"></span> <span class="right"></span> <span class="bottom"></span> <span class="left"></span> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="sample"> <img src="https://static.pexels.com/photos/33045/lion-wild-africa-african.jpg" alt="sample" /> <span class="top"></span> <span class="right"></span> <span class="bottom"></span> <span class="left"></span> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="sample"> <img src="https://static.pexels.com/photos/33045/lion-wild-africa-african.jpg" alt="sample" /> <span class="top"></span> <span class="right"></span> <span class="bottom"></span> <span class="left"></span> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="sample"> <img src="https://static.pexels.com/photos/33045/lion-wild-africa-african.jpg" alt="sample" /> <span class="top"></span> <span class="right"></span> <span class="bottom"></span> <span class="left"></span> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="sample"> <img src="https://static.pexels.com/photos/33045/lion-wild-africa-african.jpg" alt="sample" /> <span class="top"></span> <span class="right"></span> <span class="bottom"></span> <span class="left"></span> </div> </div> </div> </div>

:after,*{transition: all 0.35s ease; -webkit-transition: all 0.35s ease; -moz-transition: all 0.35s ease; -moz-transition: all 0.35s ease; -ms-transition: all 0.35s ease; -o-transition: all 0.35s ease;} img{max-width:100%;} .sample{background:#000;margin-bottom:15px;float:left;position:relative;text-align:center;line-height:100px;font-size:18px;position:relative;box-shadow:5px 5px 10px #888;overflow:hidden} .sample .top{position:absolute;top:5%; left:5%;width:90%;height:2px;background:#542222;} .sample .top:after{position:absolute;top:0; left:0;width:50px;height:2px;background:#ff0000;content:"";} .sample .right{position:absolute;top:5%; right:5%;height:90%;width:2px;background:#542222;} .sample .right:after{position:absolute;top:0; left:0;height:50px;width:2px;background:#ff0000;content:""} .sample .bottom{ position: absolute; bottom: 5%; right: 5%; height: 2px; width: 90%; background: #542222;} .sample .bottom:after{position:absolute;top:0; right:0;width:50px;height:2px;background:#ff0000;content:""} .sample .left{ position: absolute; bottom: 5%; left: 5%; height: 90%; width:2px; background: #542222;} .sample .left:after{ position:absolute;bottom:0; left:0;height:50px;width:2px;background:#ff0000;content:""} .sample:hover .top:after{width:100%;background:#fff} .sample:hover .left:after{height:100%;background:#fff} .sample:hover .bottom:after{width:100%;background:#fff} .sample:hover .right:after{height:100%;background:#fff} .sample:hover img{transform:scale(1.1)}