The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › CSS › hover image
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!
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'); }
@Blackhawkso Unfortunately, you can only use the content property with a pseudo element like ‘before’ and ‘after’ so that won’t work.
Provided you can override the CSS then this might work: http://jsfiddle.net/Paulie_D/8Svz5/