<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://scontent.cdninstagram.com/t51.2885-15/s480x480/e35/15275613_672168996289424_5222524011090542592_n.jpg?ig_cache_key=MTM5NDY1MTIzNDkyOTk2NzIxMQ%3D%3D.2" alt="" /> <div class="portfolio_images_overlay text-center"> <h6>Karmaxwave</h6> <p class="product_price"></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://scontent.cdninstagram.com/t51.2885-15/s750x750/sh0.08/e35/15535248_961799217297071_4403951073228750848_n.jpg?ig_cache_key=MTQwODkxNjkxOTYyMDI2ODE0OA%3D%3D.2" alt="" /> <div class="portfolio_images_overlay text-center"> <h6>xxxtentaction</h6> <p class="product_price"></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="https://images.universe.com/5541977d-9887-43e5-9447-5521916f8778/-/format/jpeg/-/scale_crop/500x500/center/-/progressive/yes/-/inline/yes/" alt="" /> <div class="portfolio_images_overlay text-center"> <h6>Black Karma</h6> <p class="product_price"></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://scontent.cdninstagram.com/t51.2885-15/s480x480/e35/15802852_1313754585330932_6789560863603818496_n.jpg?ig_cache_key=MTQxNjA5MjI4NTI4MzcyNDk4OA%3D%3D.2" alt="" /> <div class="portfolio_images_overlay text-center"> <h6>Dutch Revz</h6> <p class="product_price"></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://scontent.cdninstagram.com/t51.2885-15/s480x480/e35/15539059_1869975023239077_7082073365099315200_n.jpg?ig_cache_key=MTQwNDY2NTE1ODE4NjA5MjMyNA%3D%3D.2" alt="" /> <div class="portfolio_images_overlay text-center"> <h6>KXW Radio</h6> <p class="product_price"></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://scontent.cdninstagram.com/t51.2885-15/e35/15046827_1795509887389779_4028526659035463680_n.jpg?ig_cache_key=MTQwMTQ5ODk3MjcxMTI2MDIzMw%3D%3D.2" alt="" /> <div class="portfolio_images_overlay text-center"> <h6>Karmaxwave</h6> <p class="product_price"></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://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/16123022_1870415679839687_7503745368660639744_n.jpg?ig_cache_key=MTQzNTIxNTQwMzUxMTk5MTI2NQ%3D%3D.2" alt="" /> <div class="portfolio_images_overlay text-center"> <h6>Karmaxwave</h6> <p class="product_price"></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://scontent.cdninstagram.com/t51.2885-15/s750x750/sh0.08/e35/16123988_1903426789887924_5118824439500242944_n.jpg?ig_cache_key=MTQzMDY5Nzc4MjMxOTI5ODE0NQ%3D%3D.2" alt="" /> <div class="portfolio_images_overlay text-center"> <h6>Stevie Davis</h6> <p class="product_price"></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">ASTRALPRODUCTIONS <a href="http://bootstrapthemes.co" target="_blank"></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; } }