"IMAGE RESPONSIVE WITH HOVER EFFECT "
Bootstrap 3.3.0 Snippet by armis

<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 ----------> <body> <div class="container"> <h2 class="text-center"> IMAGE RESPONSIVE WITH HOVER EFFECT </h2> <div class="row bottom"> <div class="col-md-3"> <img src="http://www.almanac.com/sites/default/files/image_nodes/sturgeon-moon.jpg" class="img-responsive"/> <div class="caption border"> <h4>Image Responsive 1</h4><hr /> <p class="text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> <div class="col-md-3 "> <img src="http://www.almanac.com/sites/default/files/image_nodes/sturgeon-moon.jpg" class="img-responsive"/> <div class="caption border"> <h4>Image Responsive 2</h4><hr /> <p class="text-justify">Lorem Ipsum is simply dummy text of vthe printing and typesetting industry.</p> </div> </div> <div class="col-md-3 "> <img src="http://www.almanac.com/sites/default/files/image_nodes/sturgeon-moon.jpg" class="img-responsive"/> <div class="caption border"> <h4>Image Responsive 3</h4><hr /> <p class="text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> <div class="col-md-3 "> <img src="http://www.almanac.com/sites/default/files/image_nodes/sturgeon-moon.jpg" class="img-responsive"/> <div class="caption border"> <h4>Image Responsive 4</h4><hr /> <p class="text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> </div> </div> </body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> @import url('https://fonts.googleapis.com/css?family=Dancing+Script'); body{font-family: 'Dancing Script', cursive !important; background-color:#ddd; padding-top:70px;} *{ padding:0; margin:0;} .bottom{ margin-bottom:20px; } .border{border:1px solid #e3e2; padding:15px; margin-bottom:30px;} .caption h4{ text-transform:uppercase;} .caption p{ font-size:1.5em;} .img-responsive { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .img-responsive:hover { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); }

Related: See More


Questions / Comments: