<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 no-gutters"> <div class="col-xl-4"> <div class="box-img"> <figure><img class="bg-img"/> <div class="actions"> <div class="style-text"> <h2>Travel to Thailand</h2> </div> </div> </figure> </div> </div> <div class="col-xl-4"> <div class="box-img"> <figure><img class="bg-img"/> <div class="actions"> <div class="style-text"> <h2>Travel to Thailand</h2> </div> </div> </figure> </div> </div> <div class="col-xl-4"> <div class="box-img"> <figure><img class="bg-img"/> <div class="actions"> <div class="style-text"> <h2>Travel to Thailand</h2> </div> </div> </figure> </div> </div> <div class="col-xl-4"> <div class="box-img"> <figure><img class="bg-img"/> <div class="actions"> <div class="style-text"> <h2>Travel to Thailand</h2> </div> </div> </figure> </div> </div> <div class="col-xl-4"> <div class="box-img"> <figure><img class="bg-img"/> <div class="actions"> <div class="style-text"> <h2>Travel to Thailand</h2> </div> </div> </figure> </div> </div> <div class="col-xl-4"> <div class="box-img"> <figure><img class="bg-img"/> <div class="actions"> <div class="style-text"> <h2>Travel to Thailand</h2> </div> </div> </figure> </div> </div> </div> </div>

h2{ font-weight:bold; font-style:normal; font-stretch:normal; line-height:normal; letter-spacing:0.3px; text-align:left; font-size:14px } @media only screen and (min-width:400px){h2{font-size:14px}} @media only screen and (min-width:576){h2{font-size:16px}} @media only screen and (min-width:768){h2{font-size:18px}} @media only screen and (min-width:1200px){h2{font-size:20px}} .container{ padding:10% } .container .bg-img{ width:100%; height:236px; background:#cdb464 } .container .box-img{ width:100%; padding:2%; -o-object-fit:contain; object-fit:contain; mix-blend-mode:undefined; cursor:pointer; vertical-align:top; margin-right:30px; margin-bottom:-14px; float:left } .container .box-img figure{ position:relative; display:inline-block; width:100% } .container .box-img figure:hover .actions{ background-color:#19387d; top:0%; font-weight:bold; padding-top:4%; padding-left:6% } .container .box-img figure:hover .actions .style-text{ overflow:hidden } .container .box-img figure .actions{ display:table-cell; position:absolute; bottom:0px; top:66%; left:0; right:0; z-index:1; opacity:0.6; background-color:#19387d; -ms-transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; -moz-transition:all 0.2s ease-out; -o-transition:all 0.2s ease-out; transition:all 0.2s ease-out; color:white;padding:2%; font-weight:bold; text-align:center; vertical-align:middle } .container .box-img figure .actions .style-text{ overflow:hidden; height:84%; width:80%; opacity:unset; font-weight:900 } .container .box-img figure .actions i{ height:0; overflow:hidden }