Forums

dynamyc

I have this HTML:

<div id="logo-image"><a title="" href="http://whiteandgold.ro/ipp"><img src="logo.jpg" alt=" " /></a>

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!

Blackhawkso

Here is one way you might be able to do it

html

<div id="logo-image"><a title="" href="#"><img src="img-1.jpg" alt=" " /></a>

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'); }

Paulie_D

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

Paulie_D

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