• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Image change on rollover

Ingenious

Well-known member
#1
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? :)
 

Brogan

XenForo moderator
Staff member
#2

Hoffi

Well-known member
#3
is possible with css or JavaScript.

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

Ingenious

Well-known member
#6
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.