Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS hover image

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #38612
    dynamyc
    Member

    I have this HTML:

    and this CSS:

    #logo-text, #logo-image, .logo-image { height: 100%; position: absolute; }
    #logo-image img { display: block; bottom: 0; margin: auto; position: absolute; top: 0; }​

    How can I add a hover image ?

    I have to use this markup because this is generated by a CMS.
    Thanks!

    #104727
    Blackhawkso
    Member

    Here is one way you might be able to do it

    html

    and
    CSS

    #logo-text, #logo-image, .logo-image { height: 100%; position: absolute; }
    #logo-image img { display: block; bottom: 0; margin: auto; position: absolute; top: 0; }
    #logo-image a:hover img { content: url('img-2.jpg'); }
    #104769
    Paulie_D
    Member

    @Blackhawkso Unfortunately, you can only use the content property with a pseudo element like ‘before’ and ‘after’ so that won’t work.

    #104775
    Paulie_D
    Member

    Provided you can override the CSS then this might work: http://jsfiddle.net/Paulie_D/8Svz5/

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.