Grow your CSS skills. Land your dream job.

hover image

  • # June 21, 2012 at 8:40 pm

    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!

    # June 21, 2012 at 8:56 pm

    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'); }
    # June 23, 2012 at 2:14 am

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

    # June 23, 2012 at 2:59 am

    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)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".