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

Image change on rollover

Discussion in 'Styling and Customization Questions' started by Ingenious, Mar 28, 2013.

  1. Ingenious

    Ingenious 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? :)
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Dodgeboard and Ingenious like this.
  3. Hoffi

    Hoffi Well-Known Member

    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.
     
  4. Hoffi

    Hoffi Well-Known Member

    Brogan... that way is very old. Image Change works easy without JS. ;)
     
  5. Brogan

    Brogan XenForo Moderator Staff Member

    That's why I included the second link using CSS.
     
    ArnyVee likes this.
  6. Ingenious

    Ingenious 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.
     
  7. Brogan

    Brogan XenForo Moderator Staff Member

    You may need to change how the original logo is displayed and set that as background image too.
     

Share This Page