nav fisheye

by nickadeemus2002

HTML

<script src="https://raw.github.com/tarasbogach/jQuery-Magnify/master/jquery.magnify.js"></script>
<ul id="fisheyeNews">
                  
      <li>      
        <a href="/Test1.aspx?id=39">
        <img src="/Test1.jpg" id="/Test1.jpg" width="83px" height="83px" class="reflect" /></a>
      </li>
  
        
      <li>      
        <a href="/Test2.aspx?id=40">
        <img src="/Test2.jpg" id="/Test2.jpg" width="83px" height="83px" class="reflect" /></a>
      </li>
  
        
      <li>      
        <a href="/Test3.aspx?id=41">
        <img src="/Test3.jpg" id="/Test3.jpg" width="83px" height="83px" class="reflect" /></a>
      </li>
  
        
      <li>      
        <a href="/Test4.aspx?id=31">
        <img src="/Test4.jpg" width="83px" height="83px" class="reflect" /></a>
      </li>
  
        
      <li>      
        <a href="/Test5.aspx">
        <img src="/Test5.jpg" width="83px" height="83px" class="reflect" /></a>
      </li>
  
  
        </ul>

CSS

ul#fisheyeNews
{
margin: 0;
list-style-type: none;
text-align:center;
float: left;
width: 100%;

}

ul#fisheyeNews 
{
padding:20px 0 0 55px;}

ul#fisheyeNews  li a, ul#fisheyeMeetUs li a
{
float: left;
text-decoration: none;
padding-left:5px;
}

JavaScript

$('ul#fisheyeNews li img:first').css('width','101px').css('height','101px');


$(function () {
    $("#fisheyeNews img").hover(function(){
        $('img').css({
            "width":"83px",
            "height":"83px"
        }); 
         $(this).magnify({
             distance: 100
             }, {
                  width: '101px',
                  height: '101px',
                 distanceTo: 'center'
              });
     });
});