<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-fluid"> <div class="row bg-dark p-0"> <div class="col-12 big-wrap mx-auto p-3"> <div class="row mx-auto p-0"> <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mx-auto p-3"> <div class="geometric-box"> <img src="https://cdn.pixabay.com/photo/2018/04/08/15/13/background-3301487_960_720.jpg"> <div class="geometric-box-content"> <div class="geometric-top-link justify-content-end text-right"> <a href="#link"> &plus; </a> </div> <div class="geometric-bottom-desc"> <div class="geometric-title"> Residential Remodeling </div> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div> </div> </div> <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mx-auto p-3"> <div class="geometric-box"> <img src="https://cdn.pixabay.com/photo/2018/04/08/15/13/background-3301487_960_720.jpg"> <div class="geometric-box-content"> <div class="geometric-top-link justify-content-end text-right"> <a href="#link"> &plus; </a> </div> <div class="geometric-bottom-desc"> <div class="geometric-title"> Commercial Remodeling </div> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div> </div> </div> </div> </div> </div> </div>

@import url('https://fonts.googleapis.com/css?family=DM+Serif+Display&display=swap'); @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap'); .geometric-box { box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15); background-color: #FFFFFF; position: relative; overflow: hidden; z-index: 1; } .geometric-box img { transition: all 0.2s ease; transform: scale(1); filter: grayscale(1); overflow: hidden; height: auto; opacity: 0.2; width: 100%; } .geometric-box .geometric-box-content { position: absolute; top: 5%; left: 5%; width: 90%; height: 90%; } .geometric-box .geometric-box-content .geometric-top-link { position: absolute; top: 0%; right: 0%; width: auto; height: auto; transform: scale(0); transition: all 0.5s ease; font-family: 'DM Serif Display', serif; font-weight: 800; font-size: 50px; text-decoration: none; color: #15B097 !important; a { font-family: 'DM Serif Display', serif; font-weight: 800; font-size: 50px; text-decoration: none; color: #15B097 !important; } } .geometric-box .geometric-box-content .geometric-bottom-desc { position: absolute; bottom: 5%; left: 5%; width: 90%; height: auto; transform: scale(0); transition: all 0.5s ease; font-family: 'Roboto Condensed', sans-serif; font-weight: normal; font-size: 0.9rem; color: #232323; text-align: center; } .geometric-box .geometric-box-content .geometric-bottom-desc .geometric-title { font-family: 'DM Serif Display', serif; font-weight: normal; font-size: 30px; text-transform: uppercase; text-decoration: none; text-align: center; letter-spacing: 1px; color: #048BA8; } .geometric-box:hover img { opacity: 0.3; } .geometric-box:hover .geometric-box-content .geometric-top-link { transform: scale(1); } .geometric-box:hover .geometric-box-content .geometric-bottom-desc { transform: scale(1); }