<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 mt-5"> <div class="row my-5"> <div class="col-md-4 col-sm-6"> <div class="box"> <img src="http://www.webcoderskull.com/img/team1.png" alt=""> <div class="box-content"> <h3 class="title">Kundan</h3> <span class="post">Frontend Developer</span> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="box"> <img src="http://www.webcoderskull.com/img/team2.png" alt=""> <div class="box-content"> <h3 class="title">Vivek</h3> <span class="post">Web developer</span> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="box"> <img src="http://www.webcoderskull.com/img/team4.png" alt=""> <div class="box-content"> <h3 class="title">Jone</h3> <span class="post">Web developer</span> </div> </div> </div> </div> </div>

.box{ overflow:hidden; background: #0ebeff; position: relative; -webkit-transition: all .35s ease; transition: all .35s ease } .box:after, .box:before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #ffc107; border-left: 3px solid #fff; border-right: 3px solid #fff; opacity: .9; z-index: 1; -webkit-transition: all .35s ease; transition: all .35s ease } .box img { height: auto; width: 100% } .box:before { -webkit-transform: skew(45deg) translateX(-155%); transform: skew(45deg) translateX(-155%) } .box:hover:before { -webkit-transform: skew(45deg) translateX(-55%); transform: skew(45deg) translateX(-55%) } .box:after { -webkit-transform: skew(45deg) translateX(155%); transform: skew(45deg) translateX(155%) } .box:hover:after { -webkit-transform: skew(45deg) translateX(55%); transform: skew(45deg) translateX(55%) } .box img { -webkit-transition: all .35s ease; transition: all .35s ease } .box:hover img { opacity: .5 } .box .box-content { position: absolute; top: 50%; left: 50%; opacity: 0; z-index: 2; -webkit-transform: translate(-50%, -50%) scale(.5); transform: translate(-50%, -50%) scale(.5); -webkit-transition: all .35s ease; transition: all .35s ease } .box:hover .box-content { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); opacity: 1 } .box .post, .box .title { text-align:center; font-size: 18px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; background: #3c3c3c; border: 2px solid #fff; color: #fff; padding: 15px 20px; margin: 0 } .box .post{ text-transform: capitalize } .box .post { display: block; font-size: 14px; font-weight: 400; padding: 5px 10px; margin-top: 15px }