<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 ----------> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="bucket"> <div class="left-div left-text"> <img src="https://payload352.cargocollective.com/1/16/535601/9350218/purpose_portrait_james_breeds_800.jpg" class="img-responsive" /> <div class="card-img text"> <h4 class="card-title" style="text-align:center;padding-bottom:5px;">Special title treatment</h4> <p class="card-text">ad-in to additional content.</p> <h5 class="small-text">ad-in to additional content.</h5> <span class="card-img-overlay social-bar"> <span class="social"> <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a> </span> </span> </div> </div> <div class="left-div left-text"> <img src="https://payload352.cargocollective.com/1/16/535601/9350218/purpose_portrait_james_breeds_800.jpg" class="img-responsive" /> <div class="card-img text"> <h4 class="card-title" style="text-align:center;padding-bottom:5px;">Special title treatment</h4> <p class="card-text">ad-in to additional content.</p> <h5 class="small-text">ad-in to additional content.</h5> <span class="card-img-overlay social-bar"> <span class="social"> <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a> </span> </span> </div> </div> <div class="left-div left-text"> <img src="https://payload352.cargocollective.com/1/16/535601/9350218/purpose_portrait_james_breeds_800.jpg" class="img-responsive" /> <div class="card-img text"> <h4 class="card-title" style="text-align:center;padding-bottom:5px;">Special title treatment</h4> <p class="card-text">ad-in to additional content.</p> <h5 class="small-text">ad-in to additional content.</h5> <span class="card-img-overlay social-bar"> <span class="social"> <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a> </span> </span> </div> </div> <div class="left-div left-text"> <img src="https://payload352.cargocollective.com/1/16/535601/9350218/purpose_portrait_james_breeds_800.jpg" class="img-responsive" /> <div class="card-img text"> <h4 class="card-title" style="text-align:center;padding-bottom:5px;">Special title treatment</h4> <p class="card-text">ad-in to additional content.</p> <h5 class="small-text">ad-in to additional content.</h5> <span class="card-img-overlay social-bar"> <span class="social"> <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a> </span> </span> </div> </div> <div class="left-div left-text"> <img src="https://payload352.cargocollective.com/1/16/535601/9350218/purpose_portrait_james_breeds_800.jpg" class="img-responsive" /> <div class="card-img text"> <h4 class="card-title" style="text-align:center;padding-bottom:5px;">Special title treatment</h4> <p class="card-text">ad-in to additional content.</p> <h5 class="small-text">ad-in to additional content.</h5> <span class="card-img-overlay social-bar"> <span class="social"> <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a> </span> </span> </div> </div> <div class="left-div left-text"> <img src="https://payload352.cargocollective.com/1/16/535601/9350218/purpose_portrait_james_breeds_800.jpg" class="img-responsive" /> <div class="card-img text"> <h4 class="card-title" style="text-align:center;padding-bottom:5px;">Special title treatment</h4> <p class="card-text">ad-in to additional content.</p> <h5 class="small-text">ad-in to additional content.</h5> <span class="card-img-overlay social-bar"> <span class="social"> <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a> </span> </span> </div> </div> <div class="left-div left-text"> <img src="https://payload352.cargocollective.com/1/16/535601/9350218/purpose_portrait_james_breeds_800.jpg" class="img-responsive" /> <div class="card-img text"> <h4 class="card-title" style="text-align:center;padding-bottom:5px;">Special title treatment</h4> <p class="card-text">ad-in to additional content.</p> <h5 class="small-text">ad-in to additional content.</h5> <span class="card-img-overlay social-bar"> <span class="social"> <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a> </span> </span> </div> </div> </div>

@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro'); body { background-color: #fcfcfc; } .bucket { text-align: center; padding: 15px; position: relative; } .left-div { display: inline-block; width: 300px; height:330px; overflow:hidden; text-align: left; padding: 10px; background-color: #ddd; border-radius: 3px; margin: 5px; vertical-align: top; z-index: 1; } .right-div { display: inline-block; max-width: 150px; text-align: left; padding: 30px; background-color: #ddd; border-radius: 3px; margin: 15px; } .left-text, .right-text { font: 14px 'Source Code Pro', monospace; color: #333; } @media screen and (max-width: 600px) { .left-div, .right-div { max-width: 100%; } } .card-img a{ color:white; } .card-img{ z-index: 1; display:inline-block; position: absolute; background-color:#55227788; margin-top: -200px; width: 280px; color:white; text-align: center; font-weight: bold; padding-bottom: 10px; opacity:0; } .left-div{ display: inline-block; } .left-div:hover .card-img{ opacity:1; }