CodePen

HTML

            
              <div id="rollover-hold-1" class="rollover-hold">
  <img class="rollover-img" src="http://ahoidesign.de/test/img-1.jpg"	/>
		<img class="rollover-img" src="http://ahoidesign.de/test/img-2.jpg"	/>
		<img class="rollover-img" src="http://ahoidesign.de/test/img-1.jpg"	/>
		<img class="rollover-img" src="http://ahoidesign.de/test/img-2.jpg"	/>
		<img class="rollover-img" src="http://ahoidesign.de/test/img-1.jpg"	/>
		<img class="rollover-img" src="http://ahoidesign.de/test/img-2.jpg"	/>
		<img class="rollover-img" src="http://ahoidesign.de/test/img-1.jpg"	/>
	</div>	
            
          
!

CSS

            
              

* { margin:0; padding:0; box-sizing: border-box;}

body 				{background: none; margin:0; padding:0;}

.rollover-hold 		{margin:  20px auto; width: 200px; height: 200px; position: relative;}
.rollover			{position: absolute; height: 100%; min-height: 10px; min-width: 10px; z-index: 2; top: 0 !important;}

#rollover-hold-1 img {position: relative; list-style:none; width: 200px;}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /* Alexander Y - @the_alexyoung - http://www.alexandery.net */
jQuery(document).ready(function() {

$("img.rollover-img:first").nextAll().hide();
var divwidth = parseInt($('.rollover-hold').css('width'), 10); 
$("img.rollover-img").each(function(){
	$(this).before('<div class="rollover"></div>')
});
var divcount = $("div.rollover").size();
var divmathwidth = divwidth / divcount;
$(".rollover").css("width", divmathwidth);
var a = 0;
var b;
$(".rollover").each(function(){
	b = a * divmathwidth;
	$(this).css('left',b);
	a++;
});
$(".rollover").hover(function(){
	$(this).next("img").show().nextAll("img").hide();
	$(this).next("img").prevAll("img").hide();
});

});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................