Larn 0

long time reader, first time poster :)

I want to use text links and have a hand drawn element (as a .png) be the hover state without turning the text link into an image.

unfortunately the background image puts the image behind the text instead of the desired effect of over the text link

Is this even possible?

Any ideas would be appreciated. thanks everyone!

2 answers

Guffa 316
This was chosen as the best answer

You could put the image inside the link, hidden from the start and absolutely positioned, and show it when hovering the link:

<a href="#" class="imageHover">link text<img src="linkimage.png" alt=""/></a>


a.imageHover { position: relative; }
a.imageHover img { display: none; position: absolute; left: 0; top: 0; }
a.imageHover:hover img { display: block; }

Alternatively you could just put a span tag in the link and put the image as background, but then you have to specify the size for the span tag.

Answered over 9 years ago by Guffa
  • Guffa, genius! Simple solution, and seems so obvious now. Thank you so much!! Larn over 9 years ago

So a regular text link that gets replaced or covered by a background image on hover? You could use the image replacement technique of assigning the background image to an empty span element, positioned absolutely relative to the link. And then you could set it only to display on hover.

<a href="#">your link<span></span></a>

But this is usually done with fixed dimensions, and in this case it sounds like you'd be working with variable widths? I'm not even sure it's possible without using fixed widths.

For more on the technique, look at technique #8 here:

Answered over 9 years ago by Rob Flaherty
  • Thanks Rob- Great stuff-- the link is almost perfect, but have to tweak it- Thanks!!! Larn over 9 years ago