Title: put multiple image-before-after section with jquery
Tags: javascript;jquery;html;css
Question: I am trying to implement before-after image comparison by jquery below.It takes two images and shows the comparison.
fiddled here
<div&gt;
(image comparison1)
</div&gt;
<div&gt;
(image comparison2)
</div&gt;
<div&gt;
(image comparison3)
</div&gt;
though it is very useful for me for single pair comparison, but the problem is whenever I want to implement the same effect with multiple pair, the container size defined in css becomes trouble. I have tried to make the width and height of css as auto &amp; as fit to content, but nothing seems to work. I want to implement multiple pair comparison on the same page as shown in div above.
its like pairs of before after images.Each pair is of different size. Any suggeston for corrections with my coding is really appreciated.
Thank You in advance.
Comment: You will need to add your code to your question.

Comment: Thank you, but it seems Jordums has answered your question already. You should click accept on his answer so the question gets closed.

Comment: new section image gets overlapped on first section.

Comment: @Sirence if you click on fiddle. you will get the full working demo. take a look at the updated code : http://jsfiddle.net/m9jj2fsp/8/

Here is the accepted answer: After some searching, this was the solution:
<div class="beforeAfterSlidebar" style="width:400px;height: 400px;"&gt;
<div class="bottomImage"&gt;<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" /&gt;</div&gt;
<div class="topImage"&gt;<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" /&gt;</div&gt;
</div&gt;
<div class="beforeAfterSlidebar"&gt;
<div class="bottomImage"&gt;<img src="http://upstairsweb.com/images/afterImage.jpg" width="200" height="200" alt="after" /&gt;</div&gt;
<div class="topImage"&gt;<img src="http://upstairsweb.com/images/beforeImage.jpg" width="200" height="200" alt="before" /&gt;</div&gt;
</div&gt;
With  the JS:
$(".topImage").css('width', '50%');
$(".beforeAfterSlidebar").mousemove(
function(e) {
// get the mouse x (horizontal) position and offset of the div
var offset =  $(this).offset();
var iTopWidth = (e.pageX - offset.left);
// set width of bottomimage div
$(this).find(".topImage").width(iTopWidth);
=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Old answers - but they might help others:
I think you mean something like this?
http://jsfiddle.net/m9jj2fsp/6/
I didn't use divs, but the images instead to create the effect:
<div class="beforeAfterSlidebar"&gt;
<img id="topImg" src="http://upstairsweb.com/images/afterImage.jpg" width="800" height="600" alt="after" /&gt;
<img id="middleImg" src="http://placehold.it/300" width="800" height="600" alt="middel"/&gt;
<img id="botImg" src="http://upstairsweb.com/images/beforeImage.jpg" width="800" height="600" alt="before" /&gt;
</div&gt;
The javascript to go with it:
$(".beforeAfterSlidebar").mousemove(function(e) {
// get the mouse x (horizontal) position and offset of the 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 this isn't what you needed, just tell me, and I'll try to adapt my code.
Comment for this answer: Oh ok, I mis-understood your question completely, sorry. I thought you wanted more than to compare more than 2 images, instead of having more than 1 "compare-block".
Comment for this answer: @NAPSTER no problem, I adapted my answer so it fits. Feel free to select it as "answered"
Comment for this answer: your efforts are appreciated. thank you, But I wanted to implement something like this : http://jsfiddle.net/m9jj2fsp/7/  although i got my desired result,, but you can see that i have to write same code multiple times just with different width and height values which is very hectic for 10-12 image pairs.
Comment for this answer: still we can try to get a universal code for the bulk. take a look at : jsfiddle.net/m9jj2fsp/8
Comment for this answer: one step closer, thanks to you. How we going to solve this overlapping : http://jsfiddle.net/m9jj2fsp/13/


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 4, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2015:00:04/01/15', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><jquery><html><css>', 'Title': 'put multiple image-before-after section with jquery', 'ViewCount': 278, 'id': 29386519, 'user_AboutMe': None, 'user_AccountId': 1995354.0, 'user_DisplayName': 'NAPSTER', 'user_Reputation': 35.0, 'user_Views': 3.0, 'user_id': 1788442.0}}