<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="shadow"> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="box-customn"> <div class="img-wrap-tailor"> <a href="#" class="nohover"><img src="http://previews.123rf.com/images/ghoststone/ghoststone1506/ghoststone150600046/40752450-back-view-of-writing-beautiful-woman-Young-girl-in-dress-Rear-view-people-collection-backside-view-o-Stock-Photo.jpg" alt="fdsfsdf" /></a> <a href="#" class="onhover"><img src="http://www.rangitoto.school.nz/sites/rangitoto.school.nz/files/images/Snr%20boy%20shirt%20face%20right.jpg" alt="fdsfsdf" /></a> <span>Quick View</span> </div> <div class="imfo-area"> <h3>My Cloth</h3> <p>Lorem Ipsum is simply dummy text of the printing</p> <h4>Rs. 11,250.00</h4> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="box-customn"> <div class="img-wrap-tailor"> <a href="#" class="nohover"><img src="http://previews.123rf.com/images/ghoststone/ghoststone1506/ghoststone150600046/40752450-back-view-of-writing-beautiful-woman-Young-girl-in-dress-Rear-view-people-collection-backside-view-o-Stock-Photo.jpg" alt="fdsfsdf" /></a> <a href="#" class="onhover"><img src="http://www.rangitoto.school.nz/sites/rangitoto.school.nz/files/images/Snr%20boy%20shirt%20face%20right.jpg" alt="fdsfsdf" /></a> <span>Quick View</span> </div> <div class="imfo-area"> <h3>My Cloth</h3> <p>Lorem Ipsum is simply dummy text of the printing</p> <h4>Rs. 11,250.00</h4> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="box-customn"> <div class="img-wrap-tailor"> <a href="#" class="nohover"><img src="http://previews.123rf.com/images/ghoststone/ghoststone1506/ghoststone150600046/40752450-back-view-of-writing-beautiful-woman-Young-girl-in-dress-Rear-view-people-collection-backside-view-o-Stock-Photo.jpg" alt="fdsfsdf" /></a> <a href="#" class="onhover"><img src="http://www.rangitoto.school.nz/sites/rangitoto.school.nz/files/images/Snr%20boy%20shirt%20face%20right.jpg" alt="fdsfsdf" /></a> <span>Quick View</span> </div> <div class="imfo-area"> <h3>My Cloth</h3> <p>Lorem Ipsum is simply dummy text of the printing</p> <h4>Rs. 11,250.00</h4> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="box-customn"> <div class="img-wrap-tailor"> <a href="#" class="nohover"><img src="http://previews.123rf.com/images/ghoststone/ghoststone1506/ghoststone150600046/40752450-back-view-of-writing-beautiful-woman-Young-girl-in-dress-Rear-view-people-collection-backside-view-o-Stock-Photo.jpg" alt="fdsfsdf" /></a> <a href="#" class="onhover"><img src="http://www.rangitoto.school.nz/sites/rangitoto.school.nz/files/images/Snr%20boy%20shirt%20face%20right.jpg" alt="fdsfsdf" /></a> <span>Quick View</span> </div> <div class="imfo-area"> <h3>My Cloth</h3> <p>Lorem Ipsum is simply dummy text of the printing</p> <h4>Rs. 11,250.00</h4> </div> </div> </div> </div> </div>

.shadow{width:100%; float:left;box-shadow:0 0 10px #000;} .img-wrap-tailor a{display:block} .img-wrap-tailor{ width: 100%; float: left; overflow: hidden; height: 300px; position: relative;} .img-wrap-tailor span{ position: absolute; background: #ff6600; width: 100%; left: 0; bottom: 0; text-align: center; padding: 5px 0; font-size: 19px; color: #fff;} .box-customn{ width: 100%; float: left; border: 1px solid #ccc; margin: 15px 0;box-shadow:0 0 5px #000;} .box-customn .imfo-area{width:100%; float:left;text-align:center;} .box-customn .imfo-area h3{ margin: 0px; padding: 0px; color: #0c0c0c; font-size: 21px; line-height: 30px; font-weight: 600; text-transform: uppercase;} .box-customn .imfo-area p{margin: 0px;padding:5px 0px;font-size:14px;} .box-customn .imfo-area h4{color: #ff0000; font-weight: bold; line-height: 30px; font-size: 25px;} .img-wrap-tailor img{max-width:100%;} .box-customn a.onhover{display:none;} .box-customn:hover a.onhover{display:block;position:absolute;top:0px;left:0px;} .box-customn:hover a.nohover{display:none;}