Create Image Hover Over Effect

| Posted by James Morgan

Create your own attractive Simple Rollover Buttons and Images. This will enhance your webpage dramatically. As you can see above is a beautiful example. Now hover over the image and you will see a new image being displayed. The image above is in black and white. When you hover over, a copy of the image in color is then displayed.

+- Create your own Rollover Image
Copy and paste the code below. The code should be placed wherever you would like the images to appear on your site.

Steps for Customizing Images and Destination URL
  • Search for this line of code. You will find this line twice. Replace both of these lines with your own image.
  • Next, search for this line below and replace it with another image.This image should be the image you see when hovering over.
  • Search for this line of code and replace it with your own destination url.
  • Now search for this line of code below. You will find this line three times. Replace all three lines with your own unique name for the image. This is important if you create more than one of these cool rollover images.
That's all the steps necessary! If you have any questions please comment below. replace image on hover,


Enjoy the article so far? Recommend it to your friends and peers.

Subscribe! (free)

Be the first to our articles and get latest updates on freebies.

60 comments so far. What are your thoughts?

Post a Comment