CSS Before & After Image Rollover

Question

I posted a similar question a few days ago but i've narrowed down my problem and know exactly what I need now.

I've created a portfolio on 4ormat and need to insert a custom CSS code to have an rollover on each image so it shows the before/after.

This site shows exactly what I need - http://www.sarahcrump.com/retouching

I have that same theme and it's hosted on the same site.

The person who made that site actually posted on here a few years ago because of a rollover problem.

This was their post.

I tried just plugging that code into the custom CSS panel but didn't get any results.

I didn't think it would work because I figured I needed to put all the "before" images that appear when I hover somewhere.

I can provide any additional HTML/CSS code you need to show me where to plug in some things, just ask. Thanks everyone, really appreciate it.

Edit: Which of these codes would be best to post? http://i.imgur.com/vjtvUxw.png

Answer 1

I have looked over you question again, an I think that it would be easier in html, and just use this

<img id="test_button" src="test button.png" alt="Failed to load" onmouseover=" this.src='test button onhover.png'" onmouseout="this.src='test button.png'"</img>

I think this is what you are looking for. You can than use css to restyle how you wish. Hope this helps :)