How to create images with before/after option

  lennyeggy 16:30 29 Nov 2007


I was wondering if anyone can tell me how or point me in the right direction on how to create a before/after image on a website.

Ie: I retouch photos and wanted to have an adjusted image on my website that can have the option of hovering your mouse over and the original image shows.

ie: hover your mouse over these pics to see what I mean:
click here

Thanks for any help you can offer.

  cycoze 19:39 29 Nov 2007

Search for "rollover image" and you will find plenty of info.

If you are using Dream weaver or Front page they have an option to create roll overs.

If you want to use java script you can find a tutorial and code at The Site Wizard click here , excellent site for web building.

  Kemistri 22:33 29 Nov 2007

For obvious reasons, it is best to avoid doing with JS what you can do with CSS. Search for CSS rollovers.

  gibbs1984 08:47 30 Nov 2007

You can also have the same effect with less CSS by using CSS Opacity.

click here

  lennyeggy 10:52 30 Nov 2007

cool.. thanks for your help.
I wasn't sure if this counted or worked the same as rollovers - but I guess it does! as you can tell I'm a complete newbie to web site building - I've created slices in Photoshop before but that's it... but definately what to give it a go.

Thanks everyone... very helpful.

  Kemistri 13:24 30 Nov 2007

Word to the wise, though; try to avoid using CSS decs that are not ratified and therefore lack wide platform support.

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

OnePlus 5 review

See the work of famous artists playing with toys

iPad Pro 10.5in (2017) review

Comment faire une capture d’écran sur un Mac ?