CodePen

HTML

            
              <div class="container">
  	<div class="image">
  		<img src="http://www.alexandery.net/wp-content/uploads/2013/05/IMG_0518.jpg" />
  		<img src="http://www.alexandery.net/wp-content/uploads/2013/05/IMG_0517.jpg" />
  		<img src="http://www.alexandery.net/wp-content/uploads/2013/05/IMG_0516.jpg" />
  		<img src="http://www.alexandery.net/wp-content/uploads/2013/05/IMG_0515.jpg" class="active" />
  		<img src="http://www.alexandery.net/wp-content/uploads/2013/05/IMG_0519.jpg" />
  		<img src="http://www.alexandery.net/wp-content/uploads/2013/05/IMG_0520.jpg" />
  		<img src="http://www.alexandery.net/wp-content/uploads/2013/05/IMG_0521.jpg" />
  	</div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body {
  background: #333;
}

.container {
  width: 400px;
  margin: 20px auto;
  padding: 10px;
  background: #fff;
}

.image img {
	display: none;
}

.image img.active {
	display: block;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(function(){
	var container = $('.image'),
	images = $('.image img'),
  activeClass = 'active',
	rowWidth = Math.ceil(container.width() / images.length),
	prevRow = null;

	container.mousemove(function(m){
		curPos = m.pageX - container.offset().left;
		curRow = Math.ceil(curPos / rowWidth) - 1;

		if(curRow != prevRow && curRow >= 0){
			prevRow = curRow;
			$('.' + activeClass).removeClass(activeClass);
			$(images[curRow]).addClass(activeClass);
		}
	});
})
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................