<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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 ----------> <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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="main_portfolio_content"> <div class="col-md-3 col-sm-4 col-xs-12 single_portfolio_text"> <img src="http://i.imgur.com/PUeaHfC.png" alt="" /> <div class="portfolio_images_overlay text-center"> <h6>Italian Source Mushroom</h6> <p class="product_price">$12</p> <a href="#" class="btn btn-primary">Click here</a> </div> </div> <div class="col-md-3 col-sm-4 col-xs-12 single_portfolio_text"> <img src="http://i.imgur.com/uX3g4Nl.png" alt="" /> <div class="portfolio_images_overlay text-center"> <h6>Italian Source Mushroom</h6> <p class="product_price">$12</p> <a href="#" class="btn btn-primary">Click here</a> </div> </div> <div class="col-md-3 col-sm-4 col-xs-12 single_portfolio_text"> <img src="http://i.imgur.com/8cOtAS9.png" alt="" /> <div class="portfolio_images_overlay text-center"> <h6>Italian Source Mushroom</h6> <p class="product_price">$12</p> <a href="#" class="btn btn-primary">Click here</a> </div> </div> <div class="col-md-3 col-sm-4 col-xs-12 single_portfolio_text"> <img src="http://i.imgur.com/p7OYoBT.png" alt="" /> <div class="portfolio_images_overlay text-center"> <h6>Italian Source Mushroom</h6> <p class="product_price">$12</p> <a href="#" class="btn btn-primary">Click here</a> </div> </div> <div class="col-md-3 col-sm-4 col-xs-12 single_portfolio_text"> <img src="http://i.imgur.com/uZeTibF.png" alt="" /> <div class="portfolio_images_overlay text-center"> <h6>Italian Source Mushroom</h6> <p class="product_price">$12</p> <a href="" class="btn btn-primary">Click here</a> </div> </div> <div class="col-md-3 col-sm-4 col-xs-12 single_portfolio_text"> <img src="http://i.imgur.com/ymwlLln.png" alt="" /> <div class="portfolio_images_overlay text-center"> <h6>Italian Source Mushroom</h6> <p class="product_price">$12</p> <a href="#" class="btn btn-primary">Click here</a> </div> </div> <div class="col-md-3 col-sm-4 col-xs-12 single_portfolio_text"> <img src="http://i.imgur.com/PUeaHfC.png" alt="" /> <div class="portfolio_images_overlay text-center"> <h6>Italian Source Mushroom</h6> <p class="product_price">$12</p> <a href="#" class="btn btn-primary">Click here</a> </div> </div> <div class="col-md-3 col-sm-4 col-xs-12 single_portfolio_text"> <img src="http://i.imgur.com/A8FRrbS.png" alt="" /> <div class="portfolio_images_overlay text-center"> <h6>Italian Source Mushroom</h6> <p class="product_price">$12</p> <a href="#" class="btn btn-primary">Click here</a> </div> </div> </div> </div> </div> <div style="text-align: center;margin-top: 150px; margin-bottom:100px">Snippet Created by <a href="https://bootstrapthemes.co" target="_blank">Bootstrap themes</a></div>

.btn-primary { background-color: #E7A331; color: #ffffff; border: 2px solid #E7A331; text-transform: uppercase; border-radius: 4px; } .btn-primary:hover { background-color: #d6962c; border-color: #d6962c; color: #fff; } .portfolio{ background:url(assets/images/portfoliobg.jpg) center top no-repeat; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; overflow: hidden; } .portfolio_content{ padding-bottom:120px; display:inline-block; } .portfolio .portfolio_content .head_title h3{ color:#000000; } .portfolio .portfolio_content .head_title h4{ color:#000000; } .single_portfolio_text{ display:inline-block; padding:0; position:relative; overflow:hidden; } .single_portfolio_text img{ width:100%; } .single_portfolio_text:hover .portfolio_images_overlay{ top:5%; left: 5%; } .portfolio_images_overlay{ width: 90%; height: 90%; background: rgba(0, 0, 0, .5); padding: 20px; margin: 0 auto; top:-100%; left: 5%; position: absolute; transition:.6s; } .portfolio_images_overlay h6{ text-transform:uppercase; color:#fff; font-size:2rem; line-height:2.575rem; font-weight: 500; margin-bottom: 1rem; margin-top: 1rem; } .portfolio_images_overlay p.product_price{ font-size:2.5725rem; color:#fff; line-height:3rem; } .portfolio_images_overlay .btn{ margin-top: 25px; } @media (min-width:769px) and (max-width:991px) { .portfolio_images_overlay { padding: 0px; } } @media (max-width:768px) { .portfolio_images_overlay{ padding: 170px 20px; } } @media (max-width:580px) { .portfolio_images_overlay{ padding: 100px 20px; } } @media (max-width:480px) { .portfolio_images_overlay{ padding: 40px 20px; } } @media (max-width:320px) { .portfolio_images_overlay{ padding: 20px; } }