<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="col-12 text-center"> <p class="m-0 small dd2">Here Our Best Work</p> <h3>Our Resent Case Studies</h3> <div class="divider mx-auto"></div> </div> </div> </div> <div class="d-flex dd8"> <div class="image-overlay"> <img src="https://bootstraplily.com/demo/portfolio/portfolio-one/case-study-5.jpg" alt="Avatar" class="image2" style="width:100%"> <div class="middle2 d-flex align-items-center justify-content-center"> <div class="text2">Your Team</div> </div> </div> <div class="image-overlay"> <img src="https://bootstraplily.com/demo/portfolio/portfolio-one/case-study-4.jpg" alt="Avatar" class="image2" style="width:100%"> <div class="middle2 d-flex align-items-center justify-content-center"> <div class="text2">Family Law</div> </div> </div> <div class="image-overlay"> <img src="https://bootstraplily.com/demo/portfolio/portfolio-one/case-study-3.jpg" alt="Avatar" class="image2" style="width:100%"> <div class="middle2 d-flex align-items-center justify-content-center"> <div class="text2">Personal Law</div> </div> </div> <div class="image-overlay"> <img src="https://bootstraplily.com/demo/portfolio/portfolio-one/case-study-2.jpg" alt="Avatar" class="image2" style="width:100%"> <div class="middle2 d-flex align-items-center justify-content-center"> <div class="text2">Criminal Law</div> </div> </div> <div class="image-overlay"> <img src="https://bootstraplily.com/demo/portfolio/portfolio-one/case-study-1.jpg" alt="Avatar" class="image2" style="width:100%"> <div class="middle2 d-flex align-items-center justify-content-center"> <div class="text2">Child Abuse</div> </div> </div> </div> <div class="container text-center small text-muted mt-4 mb-5"> Design by <a href="https://bootstraplily.com/" target="_blank">www.bootstraplily.com</a> </div>

.dd2 { color: #b9753f; } .divider { width: 45px; height: 1px; background-color: #b9753f; margin-top: 20px; margin-bottom: 40px; } .image-overlay { position: relative; width: 20%; background-color: #020410; } .image2 { opacity: 1; display: block; width: 100%; height: auto; transition: .5s ease; backface-visibility: hidden; } .middle2 { transition: .5s ease; opacity: 0; position: absolute; top: 50%; left: 50%; background-color: rgba(2,4,16,0.7); width: 100%; height: 100%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; } .image-overlay:hover .image2 { opacity: 0.3; cursor: pointer; } .image-overlay:hover .middle2 { opacity: 1; cursor: pointer; } .text2 { color: #fff; font-size: 22px; border-bottom: 1px solid #b9753f; }