Image change on rollover


Well-known member
Would it be easy make the main logo image on my site (which is a .png) change when someone hovers their mouse pointer over it? If so how do I do this please? With CSS or Java and how? :)


XenForo moderator
Staff member


Well-known member
is possible with css or JavaScript.

This in extra.css should work. (untestet)
div#logo: hover img {
visibility: hidden;
background-image: url(path/to/image);
It could be neccesary to include width and height.


Well-known member
Thanks guys. The CSS version (from Brogan's post, adding a class to the logo image and then defining a hover CSS value for it in extra.css) works in the sense the other image appears on hover over. BUT, it seems to be UNDER the logo. So I can only see changes in the image through the transparent parts of the original logo when I hover over. I want the image to be completely replaced on hover over, or to appear over the original logo, otherwise this doesn't work. So still a bit stumped.

I'm only trying to make an Easter Bunny "wink" on hover over, so this is not mission critical.