CSS show rollover or glow image when hovering over an image link, without depending on image size?

Question

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.

Answer 1

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>