javascript - put multiple image-before-after section with jquery -

i trying implement before-after image comparison jquery below.it takes 2 images , shows comparison.

fiddled here

<div> (image comparison1) </div>  <div> (image comparison2) </div>  <div> (image comparison3) </div> 

though useful me single pair comparison, problem whenever want implement same effect multiple pair, container size defined in css becomes trouble. have tried make width , height of css auto & fit content, nothing seems work. i want implement multiple pair comparison on same page shown in div above.

its pairs of before after images.each pair of different size. suggeston corrections coding appreciated.

thank in advance.

after searching, solution:

<div class="beforeafterslidebar" style="width:400px;height: 400px;">     <div class="bottomimage"><img src="http://static13.jassets.com/p/clarus-urbane-solid-cotton-400-tc-satin-double-comforter-4656-990776-1-product2.jpg" width="400" height="400" alt="after" /></div>     <div class="topimage"><img src="http://static13.jassets.com/p/clarus-urbane-solid-cotton-400-tc-satin-double-comforter-3369-201776-1-product2.jpg" width="400" height="400" alt="before" /></div> </div> <div class="beforeafterslidebar">     <div class="bottomimage"><img src="http://upstairsweb.com/images/afterimage.jpg" width="200" height="200" alt="after" /></div>     <div class="topimage"><img src="http://upstairsweb.com/images/beforeimage.jpg" width="200" height="200" alt="before" /></div> </div> 

with js:

$(".topimage").css('width', '50%'); $(".beforeafterslidebar").mousemove( function(e) {   // mouse x (horizontal) position , offset of div   var offset =  $(this).offset();   var itopwidth = (e.pagex - offset.left);    // set width of bottomimage div   $(this).find(".topimage").width(itopwidth); }); 

=-=-=-=-=-=-=-=-=-=-=-=-=-=-

old answers - might others:

i think mean this?

http://jsfiddle.net/m9jj2fsp/6/

i didn't use divs, images instead create effect:

<div class="beforeafterslidebar">     <img id="topimg" src="http://upstairsweb.com/images/afterimage.jpg" width="800" height="600" alt="after" />     <img id="middleimg" src="http://placehold.it/300" width="800" height="600" alt="middel"/>        <img id="botimg" src="http://upstairsweb.com/images/beforeimage.jpg" width="800" height="600" alt="before" /> </div> 

the javascript go it:

  $(".beforeafterslidebar").mousemove(function(e) {   // mouse x (horizontal) position , offset of div   var offset =  $(this).offset();   var itopwidth = (e.pagex - offset.left);    // set width of bottomimage div   $(this).children("#middleimg").css("clip", "rect(0px," +  (itopwidth + 50) + "px,600px,"+(itopwidth - 50) +"px)");   $(this).children("#botimg").css("clip", "rect(0px," +  (itopwidth - 50) + "px,600px,0)");   }); 

if isn't needed, tell me, , i'll try adapt code.