"CSS3 Image Hover Effects"
Bootstrap 3.0.0 Snippet by SamiulHaqueKhan007

<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"> <h1 class="text-center">CSS3 Image Hover Effects</h1> <div class="col-md-4 center-block"> <div class="section-box-one"> <!----> <figure> <h3>Service</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="http://ilovelyhdwallpaper.com/wp-content/uploads/2016/03/WMotors-Fenyr-Super-Sport-Car-Wallpaper.jpg" class="img-responsive"/> </div> </div> <div class="col-md-4 center-block"> <div class="section-box-two"> <!----> <figure> <h3>Service</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="http://www.tayloredwebs.co.uk/wp-content/uploads/2016/06/web-design-and-graphic-design-wallpapers.jpg" class="img-responsive"/> </div> </div> <div class="col-md-4 center-block"> <div class="section-box-three"> <!----> <figure> <h3>Service</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="http://www.ayushmaantechnologies.com/wp-content/uploads/2017/01/5-things-to-consider-when-selecting-a-web-design-agency-1.jpg" class="img-responsive"/> </div> </div> <div> </div> <div class="col-md-4 center-block"> <div class="section-box-four"> <!----> <figure> <h3>Service</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="http://ilovelyhdwallpaper.com/wp-content/uploads/2016/03/WMotors-Fenyr-Super-Sport-Car-Wallpaper.jpg" class="img-responsive"/> </div> </div> <div class="col-md-4 center-block"> <div class="section-box-five"> <!----> <figure> <h3>Service</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="http://www.tayloredwebs.co.uk/wp-content/uploads/2016/06/web-design-and-graphic-design-wallpapers.jpg" class="img-responsive"/> </div> </div> <div class="col-md-4 center-block"> <div class="section-box-six"> <!----> <figure> <h3>Service</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="http://www.ayushmaantechnologies.com/wp-content/uploads/2017/01/5-things-to-consider-when-selecting-a-web-design-agency-1.jpg" class="img-responsive"/> </div> </div> <div> </div> <div class="col-md-4 center-block"> <div class="section-box-seven"> <!----> <figure> <h3>Service</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="http://ilovelyhdwallpaper.com/wp-content/uploads/2016/03/WMotors-Fenyr-Super-Sport-Car-Wallpaper.jpg" class="img-responsive"/> </div> </div> <div class="col-md-4 center-block"> <div class="section-box-eight"> <!----> <figure> <h3>Service</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="http://www.tayloredwebs.co.uk/wp-content/uploads/2016/06/web-design-and-graphic-design-wallpapers.jpg" class="img-responsive"/> </div> </div> <div class="col-md-4 center-block"> <div class="section-box-nine"> <!----> <figure> <h3>Service</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="http://www.ayushmaantechnologies.com/wp-content/uploads/2017/01/5-things-to-consider-when-selecting-a-web-design-agency-1.jpg" class="img-responsive"/> </div> </div> <div> </div> <div class="col-md-4 center-block"> <div class="section-box-ten"> <!----> <figure> <h3>Service</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="http://ilovelyhdwallpaper.com/wp-content/uploads/2016/03/WMotors-Fenyr-Super-Sport-Car-Wallpaper.jpg" class="img-responsive"/> </div> </div> <div class="col-md-4 center-block"> <div class="section-box-eleven"> <!----> <figure> <a href="#" class="btn pull-left"><i class="fa fa-search"></i> View</a> <a href="#" class="btn pull-right">Read More <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a> </figure> <img src="http://www.tayloredwebs.co.uk/wp-content/uploads/2016/06/web-design-and-graphic-design-wallpapers.jpg" class="img-responsive"/> </div> </div> <div class="col-md-4 center-block"> <div class="section-box-twelve"> <!----> <figure> <a href="#"><i class="fa fa-search"></i></a> </figure> <img src="http://www.ayushmaantechnologies.com/wp-content/uploads/2017/01/5-things-to-consider-when-selecting-a-web-design-agency-1.jpg" class="img-responsive"/> </div> </div> <div> </div> </div>
.btn-read { background: transparent; border-radius: 0; border: 1px solid #ffffff; color: #fff; } .section-box-one{ 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-one figure { position: absolute; text-align: center; padding: 19px; width: 100%; height: 100%; } .section-box-one img{ height: 100%; position: absolute; transition: ease-in-out .5s; -webkit-transition: ease-in-out .5s; -moz-transition: ease-in-out .5s; } .section-box-one:hover img{ transform: translate(100%, -100%); -webkit-transform: translate(100%, -100%); -moz-transform: translate(100%, -100%); } .section-box-two{ 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-two figure { position: absolute; text-align: center; padding: 19px; width: 100%; height: 100%; } .section-box-two img{ height: 100%; position: absolute; transition: ease-in-out .5s; -webkit-transition: ease-in-out .5s; -moz-transition: ease-in-out .5s; } .section-box-two:hover img{ transform: translate(-100%, -100%); -webkit-transform: translate(-100%, -100%); -moz-transform: translate(-100%, -100%); } .section-box-three{ 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-three figure { position: absolute; text-align: center; padding: 19px; width: 100%; height: 100%; } .section-box-three img{ height: 100%; position: absolute; transition: ease-in-out .5s; -webkit-transition: ease-in-out .5s; -moz-transition: ease-in-out .5s; } .section-box-three:hover img{ transform: translate(-100%, 100%); -webkit-transform: translate(-100%, 100%); -moz-transform: translate(-100%, 100%); } .section-box-four{ 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-four figure { position: absolute; text-align: center; padding: 19px; width: 100%; height: 100%; } .section-box-four img{ height: 100%; position: absolute; transition: ease-in-out .5s; -webkit-transition: ease-in-out .5s; -moz-transition: ease-in-out .5s; } .section-box-four:hover img{ transform: translate(-100%,0); -webkit-transform: translate(-100%,0); -moz-transform: translate(-100%,0); } .section-box-five{ 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-five figure { position: absolute; text-align: center; padding: 19px; width: 100%; height: 100%; } .section-box-five img{ height: 100%; position: absolute; transition: ease-in-out .5s; -webkit-transition: ease-in-out .5s; -moz-transition: ease-in-out .5s; } .section-box-five:hover img{ transform: translate(100%,0); -webkit-transform: translate(100%,0); -moz-transform: translate(100%,0); } .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%; } .section-box-six img{ 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%); } .section-box-seven{ 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-seven figure { position: absolute; text-align: center; padding: 19px; width: 100%; height: 100%; } .section-box-seven img{ height: 100%; position: absolute; transition: ease-in-out .5s; -webkit-transition: ease-in-out .5s; -moz-transition: ease-in-out .5s; } .section-box-seven:hover img{ transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); opacity: 0; } .section-box-eight{ 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; transform: rotateY(-180deg); transition: ease-in-out .5s; } .section-box-eight:hover { transform: rotateY(0deg); } .section-box-eight:hover img { transform: rotateY(-180deg); backface-visibility: hidden; transition: ease-in-out .5s; } .section-box-eight figure { position: absolute; text-align: center; padding: 19px; width: 100%; height: 100%; } .section-box-eight img{ height: 100%; position: absolute; } .section-box-nine{ 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-nine figure { position: absolute; text-align: center; padding: 19px; width: 100%; height: 100%; } .section-box-nine img{ height: 100%; position: absolute; transition: ease-in-out .5s; -webkit-transition: ease-in-out .5s; -moz-transition: ease-in-out .5s; } .section-box-nine:hover img{ transform: scale(3); -webkit-transform: scale(3); -moz-transform: scale(3); opacity: 0; } .section-box-ten{ 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-ten figure { position: absolute; text-align: left; padding: 10px 19px 19px 19px; width: 100%; height: 100%; border-top: 1px solid #fff; background: rgba(0, 0, 0, 0.71); bottom: -80%; transition: ease-in-out .5s; } .section-box-ten:hover figure { bottom: 0; } .section-box-ten figure h3{ margin: 0; padding-bottom: 10px; } .section-box-ten img{ height: 100%; } .section-box-eleven{ 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-eleven figure { position: absolute; padding: 10px 15px; width: 100%; bottom: -25%; transition: ease-in-out .5s; background: rgba(0, 0, 0, 0.71); border-top: 1px solid #fff; } .section-box-eleven:hover figure { bottom: 0; } .section-box-eleven img{ height: 100%; } .section-box-twelve{ 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-twelve figure { position: absolute; text-align: center; padding: 10px 19px 19px 19px; width: 100%; height: 100%; transition: ease-in-out .5s; opacity: 0; transform: scale(2); } .section-box-twelve:hover figure { opacity: 1; transform: scale(1); background: rgba(0, 0, 0, 0.71); } .section-box-twelve figure a{ color: #fff; font-size: 3em; top: 35%; position: relative; } .section-box-twelve img{ height: 100%; }

Related: See More


Questions / Comments: