<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 justify-content-center"> <div class="col-md-4"> <div class="service-box"> <img src="https://frm-stu.com/content/services/f8ef5d78041e3eb255c12fe8778699ba.png" class="service-box-pic" alt=""> <div class="service-box-content"> <div class="icon"> <img src="https://frm-stu.com/style/site/new_design/img/icons/preview.png" class="img-fluid" alt=""> </div> <h4 class="title">Architectural photography</h4> <p class="details">Our experience in this field is extensive. accurately photograph all the external and internal details as if our team were capturing the detail from the architect's eye.</p> </div> </div> </div> </div> </div>

.service-box{ position: relative; width: 100%; height: 380px; margin-bottom: 2rem; overflow: hidden; } .service-box::before{ position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .5; z-index: 3; } .service-box .service-box-pic{ width: 100%; height: 100%; object-fit: cover; } .service-box .service-box-content{ position: absolute; top: 50%; left: 50%; width: 85%; transform: translate(-50%, -50%); z-index: 10; color: #fff; text-align: center; transition: all 0.3s ease; } .service-box .service-box-content .icon{ transition: all 0.2s ease; position: relative; width: 80px; margin: 0 auto; transform: translateY(0); transition: all 0.2s ease; margin-bottom: 1rem; } .service-box .service-box-content .title, .service-box .service-box-content .details{ position: absolute; opacity: 0; top: 100%; transition: all 0.5s ease; } .service-box:hover .service-box-content .title, .service-box:hover .service-box-content .details{ position: relative; opacity: 1; top: 0; }