1

I have two images normal.png and glow.png and both are the same size but I don't know what this size is.

A normal image link would look like this:

<a href='http://example.com'>
  <img src='normal.png'>
</a>

When hovering over the link, can I make glow.png appear instead of normal.png, i.e. like a rollover image?

I found all sorts of CSS solutions for this, using sprites or :hover background images, but they all depend on knowing the image size in advance. That doesn't apply to my situation as my images are dynamic.

I'm using HTML5.

RocketNuts
  • 9,958
  • 11
  • 47
  • 88

2 Answers2

2

A pseudo-elememt overlays would seem the ideal solution:

body {
  text-align: center;
}
a {
  margin: 1em;
  display: inline-block;
  position: relative;
}
a:hover:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(http://www.fillmurray.com/140/100);
}
img {
  display: block;
}
<a href='http://example.com'>
  <img src='http://www.fillmurray.com/g/140/100'>
</a>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
1

As this article said, you can do it like this : 

a:hover img {
  content:url("http://lorempicsum.com/futurama/255/200/2");
}

See working fiddle

But it's not fully compatible on every browsers.

Is it possible to set the equivalent of a src attribute of an img tag in CSS?

Community
  • 1
  • 1
Vincent G
  • 8,547
  • 1
  • 18
  • 36