<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"> <div class="row"> <div class="col-md-3 col-sm-3"> <div class="feature-gallery"> <img class="thumb" src="http://www.nycoffee.com/order/images/Blackened-Chicken-Fettuccine-Alfredo.jpg" alt="" title=""> <div class="fg-overlay"> <h2>Exchange of goods and services</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> <!--/feature-gallery---> <div class="col-md-3 col-sm-3"> <div class="feature-gallery"> <img class="thumb" src="http://www.nycoffee.com/order/images/Blackened-Chicken-Fettuccine-Alfredo.jpg" alt="" title=""> <div class="fg-overlay"> <h2>Exchange of goods and services</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> <!--/feature-gallery---> <div class="col-md-3 col-sm-3"> <div class="feature-gallery"> <img class="thumb" src="http://www.nycoffee.com/order/images/Blackened-Chicken-Fettuccine-Alfredo.jpg" alt="" title=""> <div class="fg-overlay"> <h2>Exchange of goods and services</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> <!--/feature-gallery---> <div class="col-md-3 col-sm-3"> <div class="feature-gallery"> <img class="thumb" src="http://www.nycoffee.com/order/images/Blackened-Chicken-Fettuccine-Alfredo.jpg" alt="" title=""> <div class="fg-overlay"> <h2>Exchange of goods and services</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> <!--/feature-gallery---> <div class="col-md-3 col-sm-3"> <div class="feature-gallery"> <img class="thumb" src="http://www.nycoffee.com/order/images/Blackened-Chicken-Fettuccine-Alfredo.jpg" alt="" title=""> <div class="fg-overlay"> <h2>Exchange of goods and services</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> <!--/feature-gallery---> <div class="col-md-3 col-sm-3"> <div class="feature-gallery"> <img class="thumb" src="http://www.nycoffee.com/order/images/Blackened-Chicken-Fettuccine-Alfredo.jpg" alt="" title=""> <div class="fg-overlay"> <h2>Exchange of goods and services</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> <!--/feature-gallery---> <div class="col-md-3 col-sm-3"> <div class="feature-gallery"> <img class="thumb" src="http://www.nycoffee.com/order/images/Blackened-Chicken-Fettuccine-Alfredo.jpg" alt="" title=""> <div class="fg-overlay"> <h2>Exchange of goods and services</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> <!--/feature-gallery---> <div class="col-md-3 col-sm-3"> <div class="feature-gallery"> <img class="thumb" src="http://www.nycoffee.com/order/images/Blackened-Chicken-Fettuccine-Alfredo.jpg" alt="" title=""> <div class="fg-overlay"> <h2>Exchange of goods and services</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> <!--/feature-gallery---> </div> </div>

img { width: 100%; height: auto; } .feature-gallery { margin: 15px 0; overflow: hidden; position: relative; } .feature-gallery img.thumb { -moz-transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: all 700ms ease; -moz-transition: all 700ms ease; -ms-transition: all 700ms ease; -o-transition: all 700ms ease; transition: all 700ms ease; } .feature-gallery:hover img.thumb { opacity: 1; transition: all 0.35s; -moz-transform: scale(1.13); -webkit-transform: scale(1.13); -ms-transform: scale(1.13); transform: scale(1.13); } .fg-overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; transition: all.3s; width: 100%; height: 100%; padding: 30px; cursor: pointer; } .feature-gallery:hover .fg-overlay { background-color: rgba(0, 0, 0, 0.7); opacity: 1; -moz-transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .fg-overlay h2 { font-size: 18px; font-weight: 400; line-height: 22px; color: #fff; opacity: 0; margin-bottom: 5px; -moz-transform: scale(0.1); -ms-transform: scale(0.1); -webkit-transform: scale(0.1); transform: scale(0.1); transition: all .35s; } .fg-overlay p { font-size: 14px; color: #fff; opacity: 0; -moz-transform: scale(0.5); -ms-transform: scale(0.5); -webkit-transform: scale(0.5); transform: scale(0.5); transition: all .35s; } .feature-gallery:hover .fg-overlay h2, .feature-gallery:hover .fg-overlay p{ opacity: 1; -moz-transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .fg-overlay:before { opacity: 0; border: 1px solid #f1f1f1; position: absolute; top:15px; left:15px; bottom:15px; right:15px; z-index: 10; content: ""; display: block; -moz-transform: scale(0.5); -ms-transform: scale(0.5); -webkit-transform: scale(0.5); transform: scale(0.5); transition: all .35s; } .feature-gallery:hover .fg-overlay:before { opacity: 1; -moz-transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }