Bootstrap snippet: gallery small images with hover

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: images,hover,gallery



<div class="container"> <div class="col-md-12"> <div class="popup-gallery"> <a href="#" title="Photo 1"><img src="http://lorempixel.com/128/100/nature/1/" alt=""></a> <a href="#" title="Photo 1"><img src="http://lorempixel.com/128/100/nature/2/" alt=""></a> <a href="#" title="Photo 1"><img src="http://lorempixel.com/128/100/nature/3/" alt=""></a> <a href="#" title="Photo 1"><img src="http://lorempixel.com/128/100/nature/4/" alt=""></a> <a href="#" title="Photo 1"><img src="http://lorempixel.com/128/100/nature/5/" alt=""></a> <a href="#" title="Photo 1"><img src="http://lorempixel.com/128/100/nature/6/" alt=""></a> <a href="#" title="Photo 1"><img src="http://lorempixel.com/128/100/nature/7/" alt=""></a> <a href="#" title="Photo 1"><img src="http://lorempixel.com/128/100/nature/8/" alt=""></a> <a href="#" title="Photo 1"><img src="http://lorempixel.com/128/100/nature/1/" alt=""></a> <a href="#" title="Photo 1"><img src="http://lorempixel.com/128/100/nature/2/" alt=""></a> <a href="#" title="Photo 1"><img src="http://lorempixel.com/128/100/nature/3/" alt=""></a> <a href="#" title="Photo 1"><img src="http://lorempixel.com/128/100/nature/4/" alt=""></a> <a href="#" title="Photo 1"><img src="http://lorempixel.com/128/100/nature/5/" alt=""></a> <a href="#" title="Photo 1"><img src="http://lorempixel.com/128/100/nature/6/" alt=""></a> <a href="#" title="Photo 1"><img src="http://lorempixel.com/128/100/nature/7/" alt=""></a> <a href="#" title="Photo 1"><img src="http://lorempixel.com/128/100/nature/8/" alt=""></a> <a href="#" title="Photo 1"><img src="http://lorempixel.com/128/100/nature/1/" alt=""></a> <a href="#" title="Photo 1"><img src="http://lorempixel.com/128/100/nature/2/" alt=""></a> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="modalShow" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body text-center"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>
body{margin-top:20px;} .popup-gallery a img { margin: 2px 0; width:128px; height:100px; display: inline-block; line-height: 1.42857143; background-color: #fff; -webkit-transition: border .2s ease-in-out; -o-transition: border .2s ease-in-out; transition: border .2s ease-in-out; } .popup-gallery a img:hover { opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */ }
$(document).ready(function() { $("img").click(function(){ var img = $(this).attr("src"); $("#modalShow .modal-body").html("<img src='"+img+"' class='img-responsive'>"); $("#modalShow").modal("show"); }); })
Dey-Dey

gallery small images with hover

Dey-Dey
  May 19th, 09:36
1.4K Views