Эффект миниатюры с помощью jQuery и CSS3

<link rel="stylesheet" type="text/css" href="/css/demo.css" />
  <link rel="stylesheet" type="text/css" href="/css/style1.css" />
<script type="text/javascript">
  // Please don't use this code on your site, use your own GA code
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-7243260-2']);
  _gaq.push(['_trackPageview']);

  (function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
  </script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>// эта строка нужна лишь, если у вас не подключена библиотека jQuery!
  <script type="text/javascript" src="/js/jquery.proximity.js"></script>
  <script type="text/javascript">
  $(function() {
   
  var Photo = (function() {
   
  // list of thumbs
  var $list = $('#pe-thumbs'),
  // the images
  $elems = $list.find('img'),
  // maxScale : maximum scale value the image will have
  // minOpacity / maxOpacity : minimum (set in the CSS) and maximum values for the image's opacity
  settings = {
  maxScale : 1.4,
  maxOpacity : 0.9,
  minOpacity : Number( $elems.css('opacity') )
  },
  init = function() {
   
  // minScale will be set in the CSS
  settings.minScale = _getScaleVal() || 1;
  _initEvents();
   
  },
  // Get Value of CSS Scale through JavaScript:
  // http://css-tricks.com/get-value-of-css-rotation-through-javascript/
  _getScaleVal= function() {
   
  var st = window.getComputedStyle($elems.get(0), null),
  tr = st.getPropertyValue("-webkit-transform") ||
  st.getPropertyValue("-moz-transform") ||
  st.getPropertyValue("-ms-transform") ||
  st.getPropertyValue("-o-transform") ||
  st.getPropertyValue("transform") ||
  "fail...";

  if( tr !== 'none' ) {  

  var values = tr.split('(')[1].split(')')[0].split(','),
  a = values[0],
  b = values[1],
  c = values[2],
  d = values[3];

  return Math.sqrt( a * a + b * b );
   
  }
   
  },
  _initEvents = function() {
   
  // the proximity event
  $elems.on('proximity.Photo', { max: 80, throttle: 10, fireOutOfBounds : true }, function( event, proximity, distance ) {
   
  var $el = $(this),
  $li = $el.closest('li'),
  scaleVal = proximity * ( settings.maxScale - settings.minScale ) + settings.minScale,
  scaleExp = 'scale(' + scaleVal + ')';
   
  // change the z-index of the element once it reaches the maximum scale value
  ( scaleVal === settings.maxScale ) ? $li.css( 'z-index', 1000 ) : $li.css( 'z-index', 1 );
   
  $el.css({
  '-webkit-transform' : scaleExp,
  '-moz-transform' : scaleExp,
  '-o-transform' : scaleExp,
  '-ms-transform' : scaleExp,
  'transform' : scaleExp,
  'opacity' : ( proximity * ( settings.maxOpacity - settings.minOpacity ) + settings.minOpacity )
  });

  });
   
  }
   
  return {
  init : init
  };
   
  })();
   
  Photo.init();
   
  });
  </script>

<div class="container">  
  <section class="pe-container">
  <ul id="pe-thumbs" class="pe-thumbs">
  <li><a href="#"><img src="/images/thumbs/1.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/2.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/3.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/4.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/5.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/6.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/7.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/8.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/9.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/10.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/11.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/12.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/13.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/14.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/15.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/16.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/17.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/18.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/19.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/20.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/21.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/22.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/23.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/24.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/25.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/26.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/27.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/28.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/29.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/30.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/31.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/32.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/33.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/34.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/35.jpg" /></a></li>
  <li><a href="#"><img src="/images/thumbs/36.jpg" /></a></li>
  </ul>
  </section>
  </div>