Image border animation ( Source Code )

Image border animation  ( Source Code )

Add Bootstrap css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

HTML

<div class="services-area"> <div class="container"> <div class="row"> <div class="section-header text-center"> <h2> Our Works</h2> <br> </div> </div> <div class="row"> <!-- Single Menu Item--> <div class="col-md-4 col-sm-6"> <div class="single-works"> <img src="images/1.png" alt=""> <div class="overlay-text"> <h3 class="title"> Web Design</h3> <span class="post">Project One</span> </div> </div> </div> <!-- Single Menu Item--> <div class="col-md-4 col-sm-6"> <div class="single-works"> <img src="images/2.png" alt=""> <div class="overlay-text"> <h3 class="title"> Web Design</h3> <span class="post">Project One</span> </div> </div> </div> <!-- Single Menu Item--> <div class="col-md-4 col-sm-6"> <div class="single-works"> <img src="images/3.png" alt=""> <div class="overlay-text"> <h3 class="title"> Web Design</h3> <span class="post">Project One</span> </div> </div> </div> <!-- Single Menu Item--> <div class="col-md-4 col-sm-6"> <div class="single-works"> <img src="images/4.png" alt=""> <div class="overlay-text"> <h3 class="title"> Web Design</h3> <span class="post">Project One</span> </div> </div> </div> <!-- Single Menu Item--> <div class="col-md-4 col-sm-6"> <div class="single-works"> <img src="images/5.png" alt=""> <div class="overlay-text"> <h3 class="title"> Web Design</h3> <span class="post">Project One</span> </div> </div> </div> <!-- Single Menu Item--> <div class="col-md-4 col-sm-6"> <div class="single-works"> <img src="images/6.png" alt=""> <div class="overlay-text"> <h3 class="title"> Web Design</h3> <span class="post">Project One</span> </div> </div> </div> </div> </div> </div>


CSS


body{ background: #ddd; } .single-works { margin-bottom: 30px; overflow: hidden; position: relative; transition: all 0.3s ease 0s; box-shadow: 5px 5px 15px #000; } .single-works:hover { transform: translateY(-8px); } .single-works:hover .overlay-text { opacity: 1; } .single-works:hover .overlay-text:before, .single-works:hover .overlay-text:after{ opacity: 1; transform: scale(1); } .single-works .title{ font-size: 25px; font-weight: 700; color: #D4AF37; margin: 0 0 15px 0; } .overlay-text .post{ display: block; font-weight: 600; font-size: 20px; color: #fff; } .single-works img { width: 100%; height: auto; } .single-works .overlay-text { width: 100%; height: 100%; font-size: 16px; color: #fff; background: rgba(0, 0, 0, 0.6); text-align: center; padding-top: 20%; opacity: 0; position: absolute; top: 0; left: 0; transition: all 0.6s ease 0s; } .single-works .overlay-text:before { border-left: 1px solid rgba(255, 255, 255, 0.9); border-right: 1px solid rgba(255, 255, 255, 0.9); left: 30px; right: 30px; } .single-works .overlay-text:after { border-top: 1px solid rgba(255, 255, 255, 0.9); border-bottom: 1px solid rgba(255, 255, 255, 0.9); top: 30px; bottom: 30px; } .single-works .overlay-text:before, .single-works .overlay-text:after { content: ""; position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px; opacity: 0; z-index: 1; transform: scale(1.5); transition: all 0.6s ease 0.2s; }