<div class="effect-container">  
  <div class="effect-details">startEffect : grayscale, hoverEffect : normal (для HTML5 браузеров)</div>  
  <img class="img-style row6" src="img/gallery-images/6_1.png"/>  
  <img class="img-style row6" src="img/gallery-images/6_2.png"/>  
  </div>  

  <div class="effect-container">  
  <div class="effect-details">startEffect : normal, hoverEffect : popout</div>  
  <img class="img-style row1" src="img/gallery-images/1_1.png"/>  
  <img class="img-style row1" src="img/gallery-images/1_2.png"/>  
  </div>  

  <div class="effect-container">  
  <div class="effect-details">startEffect : overlay, hoverEffect : sliceDown</div>  
  <img class="img-style row2" src="img/gallery-images/1_1.png"/>  
  <img class="img-style row2" src="img/gallery-images/1_2.png"/>  
  </div>  
  <div class="effect-container">  
  <div class="effect-details">startEffect : transparent, hoverEffect : boxRandom</div>  

  <img class="img-style row3" src="img/gallery-images/3_1.png"/>  
  <img class="img-style row3" src="img/gallery-images/3_2.png"/>  
  </div>  
  <div class="effect-container">  
  <div class="effect-details">startEffect : overlay, hoverEffect : foldLeft</div>  
  <img class="img-style row4" src="img/gallery-images/4_1.png"/>  
  <img class="img-style row4" src="img/gallery-images/4_2.png"/>  

  </div>  
  <div class="effect-container">  
  <div class="effect-details">startEffect : transparent, hoverEffect : boxRainGrowReverse</div>  
  <img class="img-style row5" src="img/gallery-images/3_1.png"/>  
  <img class="img-style row5" src="img/gallery-images/4_2.png"/>  
  </div>

.adipoli-wrapper  
{  
  margin:auto;  
  position:relative;  
  display: inline-block;  
}  
.adipoli-wrapper>img  
{  
  position: absolute;  
  z-index: 1;  
}  
.adipoli-before  
{  
  position: absolute;  
  z-index: 5;  
}  
.adipoli-after  
{  
  position: absolute;  
  z-index: 10;  
}  
.adipoli-slice {  
  display:block;  
  position:absolute;  
  z-index:15;  
  height:100%;  
}  
.adipoli-box  
{  
  display:block;  
  position:absolute;  
  z-index:15;  
}

.effect-container  
{  
  float: left;  
  width: 100%;  
  padding-top: 10px;  
  padding-bottom: 10px;  
  text-align: center;  
}  
.effect-container .img-style  
{  
  margin: 7px;  
}  
.effect-details  
{  
  font-family: 'Advent Pro', sans-serif;  
  font-size: 20px;  
  color: #666;  
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
  <script src="js/jquery.adipoli.min.js" type="text/javascript"></script>

<script type="text/javascript">  
   
  $(function(){  
  $('.row1').adipoli({  
  'startEffect' : 'normal',  
  'hoverEffect' : 'popout'  
  });  
  $('.row2').adipoli({  
  'startEffect' : 'overlay',  
  'hoverEffect' : 'sliceDown'  
  });  
  $('.row3').adipoli({  
  'startEffect' : 'transparent',  
  'hoverEffect' : 'boxRandom'  
  });  
  $('.row4').adipoli({  
  'startEffect' : 'overlay',  
  'hoverEffect' : 'foldLeft'  
  });  
  $('.row5').adipoli({  
  'startEffect' : 'transparent',  
  'hoverEffect' : 'boxRainGrowReverse'  
  });  
  $('.row6').adipoli({  
  'startEffect' : 'grayscale',  
  'hoverEffect' : 'normal'  
  });  
  });  
   
  </script>