"image hover"
Bootstrap 3.0.0 Snippet by karimsharf12252

<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"> <div class="row"> <div class="col-md-12 col-xs-12 col-sm-12"> <div class="detalis all holder image"> <div class="detalis holder about image"> <h2>OUR <span> CLASSES </span></h2> </div> <div class="detalis about image"> <h2>LOREM IPSUM DOLOR</h2> </div> <div class="hr-title-holder about image"> <div class="hr-title"> <hr> </div> </div> </div> <div class="detalis holder image hover"> <p><strong> Duis convallis vel urna et vestibulum. Suspendisse gravida lacinia tellus in rhoncus.</strong> Proin rutrum pulvinar nulla, ut sollicitudin lectus imperdiet vitae. Pellentesque portabi neque nisi.</p> </div> <div class="box holder"> <div class="col-md-3 col-xs-12 col-sm-3 box holder"> <div class="section-box-six"> <figure> <h3>BODYBUILDING</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p> <a href="#" class="btn btn-read">Read More</a> </figure> <img src="file:///C:/Users/NewVision/Desktop/new%20project/img/image1.jpg" class="img-responsive"/> </div> </div> <div class="col-md-3 col-xs-12 col-sm-3 box holder"> <div class="section-box-six"> <figure> <h3>KARATE</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p> <a href="#" class="btn btn-read">Read More</a> </figure> <img src="file:///C:/Users/NewVision/Desktop/new%20project/img/image2.jpg" class="img-responsive"/> </div> </div> <div class="col-md-3 col-xs-12 col-sm-3 box holder"> <div class="section-box-six"> <figure> <h3>YOGA</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p> <a href="#" class="btn btn-read">Read More</a> </figure> <img src="file:///C:/Users/NewVision/Desktop/new%20project/img/image3.jpg" class="img-responsive"/> </div> </div> <div class="col-md-3 col-xs-12 col-sm-3 box holder"> <div class="section-box-six"> <figure> <h3>AEROBICS</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p> <a href="#" class="btn btn-read">Read More</a> </figure> <img src="file:///C:/Users/NewVision/Desktop/new%20project/img/image4.jpg" class="img-responsive"/> </div> </div> <div class="col-md-3 col-xs-12 col-sm-3 box holder"> <div class="section-box-six"> <figure> <h3>BOXING</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p> <a href="#" class="btn btn-read">Read More</a> </figure> <img src="file:///C:/Users/NewVision/Desktop/new%20project/img/image5.jpg" class="img-responsive"/> </div> </div> <div class="col-md-3 col-xs-12 col-sm-3 box holder"> <div class="section-box-six"> <figure> <h3>SWIMING</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p> <a href="#" class="btn btn-read">Read More</a> </figure> <img src="file:///C:/Users/NewVision/Desktop/new%20project/img/image6.jpg" class="img-responsive"/> </div> </div> <div class="col-md-3 col-xs-12 col-sm-3 box holder"> <div class="section-box-six"> <figure> <h3>FITNESS</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p> <a href="#" class="btn btn-read">Read More</a> </figure> <img src="file:///C:/Users/NewVision/Desktop/new%20project/img/image7.jpg" class="img-responsive"/> </div> </div> <div class="col-md-3 col-xs-12 col-sm-3 box holder"> <div class="section-box-six"> <figure> <h3>WEIGHTLIFTING</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p> <a href="#" class="btn btn-read">Read More</a> </figure> <img src="file:///C:/Users/NewVision/Desktop/new%20project/img/image8.jpg" class="img-responsive"/> </div> </div> </div> </div> </div> </div>
.hr-title-holder.about.image { margin-left: 47%; margin-top: 18px; } .detalis.all.holder.image { text-align: center; margin-top: 2px; } .detalis.holder.image.hover p { margin-top: 42px; text-align: center; font-size: 22px; padding-left: 26px; word-spacing: 2px; margin-bottom: 41px; } .section-box-six{ height: 250px; background: radial-gradient(#6e6e6e,#2f2f2f); background: -webkit-radial-gradient(#6e6e6e,#2f2f2f); background: -moz-radial-gradient(#6e6e6e,#2f2f2f); color: #fff; position: relative; overflow:hidden; } .section-box-six figure { position: absolute; text-align: center; padding: 19px; width: 100%; height: 100%; background: rgb(212, 20, 90); } .section-box-six img{ width: 100%; height: 100%; position: absolute; transition: ease-in-out .5s; -webkit-transition: ease-in-out .5s; -moz-transition: ease-in-out .5s; } .section-box-six:hover img{ transform: translate(0,-100%); -webkit-transform: translate(0,-100%); -moz-transform: translate(0,-100%); } figure p { color: #b6b4b4; } figure a { color: white; } .col-md-3.col-xs-12.box.holder { padding: 0; }

Related: See More


Questions / Comments: