large shade tree

Navigation

Information

Recent Posts

Shade Tree Sites |Building Better Websites

Easy CSS MouseOver Effect

Recently came across a situation designing a wordpress site where the client wanted a mouseover image on the home page of the site, however when I applied the standard  mouseover javascript it conflicted with the superfish javascript and broke the site’s navigation menu. 

Needing the navigation menu and not wanting to give up the mouseover effect I found a work around using this css effect.

First the 2 images you wish to switch on hover/mouseover need to be the same size – mine were 600px wide by 300px high

Using a photo editor I placed the images side by side and saved as 1 image – 1200px wide by 300px high. 

  • Note: when you combine the images into 1 – the image placed to the left will be the image you see first and the image placed to the right will become visible on hover/mouseover.

Next I uploaded the image   ie.  [http://mysite.com/wp-content/themes/mytheme/images/hover.jpg]  – you upload wherever you are going to host the image.

Then I added the following css between the <head></head> tags on the page I wanted the effect.  (This could also be added to the stylesheet instead – no brackets and no bold)

[<style type=”text/css”>
a.front { display:block; height:300px; width:600px; overflow:hidden; }
a.front:hover { display:block; text-indent:-600px; }
</style>]

The height equals the height of your image.  The width equals 1/2 of the combined image.  The text-indent equals (-)negative 1/2 of the combined image.  In my case my combined image was 1200 x 300 – so my values were 600 and 300.

Basically. By declaring overflow:hidden  you are allowing 1/2 of the image to be visible and then on hover/mouseover you are allowing the other half of the image to be visible.

Finally, I had designed the hover/mouseover in a table format so in the<td> where I wanted the image effect I placed the following: (no end brackets)

[<td><a class=”front” href=”http://mysite.com”><img src=”http://mysite.com/wp-content/themes/mytheme/images/hover.jpg” width=1200px height=300px; /></a></td>]

“a class” refers to the css above where I created  “a:front”  – you can call it anything you want – “front” helps me keep track for future changes etc.

  • Important:  This technique will not work with the anchor (link) ie:  <a href></a>

Just save and you have a hover/mouseover effect of 2 images.

Comment Pages

There are 2 Comments to "Easy CSS MouseOver Effect"