gallery small images with hover

This bootstrap snippet called "gallery small images with hover" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: images,hover,gallery

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<div class="container">
<div class="col-md-12">
	<div class="popup-gallery">
		<a href="#" title="Photo 1"><img src="https://lorempixel.com/128/100/nature/1/" alt=""></a>
		<a href="#" title="Photo 1"><img src="https://lorempixel.com/128/100/nature/2/" alt=""></a>
		<a href="#" title="Photo 1"><img src="https://lorempixel.com/128/100/nature/3/" alt=""></a>
		<a href="#" title="Photo 1"><img src="https://lorempixel.com/128/100/nature/4/" alt=""></a>
		<a href="#" title="Photo 1"><img src="https://lorempixel.com/128/100/nature/5/" alt=""></a>
		<a href="#" title="Photo 1"><img src="https://lorempixel.com/128/100/nature/6/" alt=""></a>
		<a href="#" title="Photo 1"><img src="https://lorempixel.com/128/100/nature/7/" alt=""></a>
		<a href="#" title="Photo 1"><img src="https://lorempixel.com/128/100/nature/8/" alt=""></a>
		<a href="#" title="Photo 1"><img src="https://lorempixel.com/128/100/nature/1/" alt=""></a>
		<a href="#" title="Photo 1"><img src="https://lorempixel.com/128/100/nature/2/" alt=""></a>
		<a href="#" title="Photo 1"><img src="https://lorempixel.com/128/100/nature/3/" alt=""></a>
		<a href="#" title="Photo 1"><img src="https://lorempixel.com/128/100/nature/4/" alt=""></a>
		<a href="#" title="Photo 1"><img src="https://lorempixel.com/128/100/nature/5/" alt=""></a>
		<a href="#" title="Photo 1"><img src="https://lorempixel.com/128/100/nature/6/" alt=""></a>
		<a href="#" title="Photo 1"><img src="https://lorempixel.com/128/100/nature/7/" alt=""></a>
		<a href="#" title="Photo 1"><img src="https://lorempixel.com/128/100/nature/8/" alt=""></a>
		<a href="#" title="Photo 1"><img src="https://lorempixel.com/128/100/nature/1/" alt=""></a>
		<a href="#" title="Photo 1"><img src="https://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>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

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 */
}
                                    

This is the JS code for this bootstrap snippet

Copy, paste, change, customize and run the following JS code to get a result Like the one shown in the preview

$(document).ready(function() {
  $("img").click(function(){
    var img = $(this).attr("src");
    $("#modalShow .modal-body").html("<img src='"+img+"' class='img-responsive'>");
     $("#modalShow").modal("show");
  });
}) 

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Apr 13th 2016, 17:42

Views: 2.6K

Rated 5/5 based on 4 reviews