Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  
  #columns{
    height: 315px;
    position:relative;
    margin: 0 auto;
    overflow: hidden;
    width: 964px;
    background:#3366CC;
  }
  #column_container{
    position:relative;
    width:636px;   /*imgs Widths + imgs margins */
    top:70px;
    margin:0 auto;
  }
  .item{
    cursor:pointer;
    position:relative;
    float:left; 
  }
  .item img{
    position:relative;
    width:155px;
    margin:2px;
    left:0;
  }
​
  
</style>
</head>
<body>
  
  
<div id="columns">
  
  <div id="column_container">
  
      <div id="firstColumn" class="item" style="display: block;">
          <img class="firstImage" alt="About Us" src="http://www.fmatech.net/Web-Design/assets/about-icon.jpg" />
      </div>
            
      <div id="secondColumn" class="item" style="display: block;">
          <img class="secondImage" alt="Website Gallery" src="http://www.fmatech.net/Web-Design/assets/internet-icon.jpg" />
      </div>
        
      <div id="thirdColumn" class="item" style="display: block;">
          <img class="thirdImage" alt="Computer Gallery" src="http://www.fmatech.net/Web-Design/assets/desktop-icon.jpg" />
      </div>
        
      <div id="fourthColumn" class="item" style="display: block;">
          <img class="fourthImage" alt="Computer Gallery" src="http://www.fmatech.net/Web-Design/assets/desktop-icon.jpg" />
      </div>
    
  </div>
    
</div>
​
  
  
  
</body>
</html>
 
​
​
var imgWmarg = 159; // image with margins (px)
var imgW = 155;
var increaseWidth = 80; // px (both sides)
​
$('.item img').each(function(i,e){
  
  $(this).css({position:'absolute', left: '+='+(imgWmarg*i) });
  
  $(this).hover(function(){    
        $(this).css({zIndex:1}).stop(1).animate({ top:-40, left:((imgWmarg*i)-(increaseWidth/2)), width:(imgW+increaseWidth) },300);    
  }, function(){    
        $(this).stop(1).animate({ top:0, left:(imgWmarg*i), width:imgW }, 100, function(){
                $(this).css({zIndex:0});     // at the end of animation
        });
  });
  
}); 
​
​
​
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers