'Roll over image to view original'?

fredward / 2010-03-06 00:31:54   

Hi guys, I'm very noob to all this. VERY noob, so there. I've got a nice site in the making - http://largeretouching.com/
and would really like to make it so that instead of clicking 'next', a visitor merely has to move the cursor over an image to see the original.

This site is excactly what I mean:
(also, I love having thumbnails on the side like that, is that possible?)

Can anyone tell me what to do next?! I read the 'make a plugin' tutorial, but hit the wall when it came to actually making one - txt file? pulling hair out! As I say I'm very new to the technical side, so any help would be so appreciated, thankyou!

jesper / 2010-03-06 02:49:45   

Hiya Fred.

Very nice skills you have with images. My illusions of the fashion industry have been shattered :-)

I assume what you want only applies to a set of two "before and after" images, yes?

If so, you could do it via css. You would have to insert the "before-image" element manually, wrap it in a div container with a class, give that div the "after image" as a background image, then set the "before image" to display:none on hover. Something like this:

  1. .imgdivclass {
  2. width: value;
  3. height: value;
  4. background-image: url(someurl);
  5. padding: 0;
  6. }

.imgdivclass img:hover {
display: none;

/*and perhaps include*/

.imgdivclass img {
margin: 0;


Just to give you an idea of a possible way to go. However it may be the background-image could load first, in which case the surprise could be spoiled. To avoid this a javascript/jQuery route could be the answer, as I can see your referenced site has chosen a basic Javascript swap image solution.



fredward / 2010-03-06 22:14:00   

thanks for your help - as I say I'm very lost when it comes to code - could you tell me where I actually put this code? I mean literally so a monkey could understand, thanks!

This thread has been closed, thank you.