Comments on: Compare before and after photos using CSS Clip and jQuery http://www.thewebsitetailor.com/2009/11/compare-before-and-after-photos-using-css-clip-and-jquery/ Perry Trinier Tue, 09 Mar 2010 07:03:50 +0000 http://wordpress.org/?v=2.9.2 hourly 1 By: Michael Thompson http://www.thewebsitetailor.com/2009/11/compare-before-and-after-photos-using-css-clip-and-jquery/comment-page-1/#comment-134 Michael Thompson Wed, 11 Nov 2009 17:51:55 +0000 http://www.thewebsitetailor.com/?p=46#comment-134 You might want to widen the draggable handle a bit and add a hover action to the images so that the draggable handle gets a bit more attention and lets the user know that it is interactive. Sample CSS additions (transparency could be done via jQuery): div.imagecompare .resizer { opacity: .5; width: 5px; } div.imagecompare:hover .resizer { opacity: 1; } Great job. :) You might want to widen the draggable handle a bit and add a hover action to the images so that the draggable handle gets a bit more attention and lets the user know that it is interactive.

Sample CSS additions (transparency could be done via jQuery):

div.imagecompare .resizer {
opacity: .5;
width: 5px;
}

div.imagecompare:hover .resizer {
opacity: 1;
}

Great job. :)

]]> By: Rick http://www.thewebsitetailor.com/2009/11/compare-before-and-after-photos-using-css-clip-and-jquery/comment-page-1/#comment-133 Rick Wed, 11 Nov 2009 12:04:00 +0000 http://www.thewebsitetailor.com/?p=46#comment-133 Your second image hides the subsequent text when javascript is turned off. Use overflow: div.imagecompare { height:640px; overflow:scroll; position:relative; width:500px; } Your second image hides the subsequent text when javascript is turned off. Use overflow:

div.imagecompare {
height:640px;
overflow:scroll;
position:relative;
width:500px;
}

]]>