Image gallery with effects

This bootstrap snippet called "Image gallery with effects" 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: image,gallery,effects

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 img-content">
    <div class="row">
        <h2 class="text-center text-muted title">Image Gallery With Effects</h2>
    </div> 
    <div class="row">
    	<div class="col-md-3 col-sm-4 col-xs-6 gray"><img class="img-responsive" src="https://lorempixel.com/400/200/abstract/1/" /></div>
        <div class="col-md-3 col-sm-4 col-xs-6 shrink "><img class="img-responsive" src="https://lorempixel.com/400/200/abstract/2/"/></div>
        <div class="col-md-3 col-sm-4 col-xs-6 vertpan"><img class="img-responsive" src="https://lorempixel.com/400/200/abstract/3/" /></div>
        <div class="col-md-3 col-sm-4 col-xs-6 tilt"><img class="img-responsive" src="https://lorempixel.com/400/200/abstract/4/"/></div>
    	<div class="col-md-3 col-sm-4 col-xs-6 gray"><img class="img-responsive" src="https://lorempixel.com/400/200/abstract/5/" /></div>
        <div class="col-md-3 col-sm-4 col-xs-6 shrink "><img class="img-responsive" src="https://lorempixel.com/400/200/abstract/6/" /></div>
        <div class="col-md-3 col-sm-4 col-xs-6 vertpan"><img class="img-responsive" src="https://lorempixel.com/400/200/abstract/7/" /></div>
        <div class="col-md-3 col-sm-4 col-xs-6 tilt"><img class="img-responsive" src="https://lorempixel.com/400/200/abstract/8/" /></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

.img-content {
    margin-top:40px;    
}

.img-content .title {
    margin-bottom:20px;    
}

img {
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
  margin-bottom:20px;
}

.gray img:hover{
  filter: gray;
  -webkit-filter: grayscale(1); 
}

.tilt img:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
          
    -webkit-transition-duration: 500ms;
       -moz-transition-duration: 500ms;
         -o-transition-duration: 500ms;
            transition-duration: 500ms;
}


.vertpan img:hover {
  margin-top: -50px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;

}

.shrink img:hover {
    opacity: 0.7;
    cursor: pointer;
    border-radius: 0px;
  -webkit-transform: scale(1.2, 1.2);
  -webkit-transition-timing-function: ease-out;
                      -moz-transform: scale(1.2, 1.2);
     -moz-transition-timing-function: ease-out;
                       -ms-transform: scale(1.20, 1.20);
      -ms-transition-timing-function: ease-out;

         -webkit-transition-duration: 500ms;
            -moz-transition-duration: 500ms;
             -ms-transition-duration: 500ms;

}

.tilt img:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

 
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.2

Created: Feb 16th 2015, 12:11

Views: 9.4K

Rated 5/5 based on 2 reviews