How to overlay a transparent PNG over an image /when rolling over some other item/


I have a webpage with a content image. On this image, I want to highlight a few different items, triggered by the user rolling over the corresponding item in the text on the same page.

I have transparent PNGs that I can use as image overlays to accomplish the highlighting. I know how to make an overlay appear STATICALLY by using span tags (as explained here).

But, I am at a loss how to display a specific overlay ONLY WHEN the user is rolling over some particular piece of text. To visualize what I am trying to do, imagine an image that shows a London Tube map. I want a yellow highlight to appear over a specific station when the pointer is over the name of that station in the text.

Any suggestions, examples, or related tutorials would be much appreciated!

  • Matt

Problem courtesy of: Matt Mizumi


This should work. Just replace the SPANs with the PNG image tags. You may also want to use display block instead of display inline for the images.

.overlay {
display: none;
position: absolute;
#map {
position: relative;
border: 1px solid black;
width: 350px;
height: 200px;
#station_A { top: 20px; left: 85px }
#station_B { top: 150px; left: 180px }
.hover { color: green }
<div id="map">
<span id="station_A" class="overlay">Highlight image here.</span>
<span id="station_B" class="overlay">Highlight image here.</span>

<span class="hover station_A">Station Alpha</span> is one example.
<span class="hover station_B">Station Beta</span> is another.

<script src=""></script>
jQuery(function() {
jQuery('.overlay').each(function(i, el) {
jQuery('.' +
.mouseenter(function() { jQuery(el).css('display', 'inline') })
.mouseleave(function() { jQuery(el).css('display', 'none') });

Solution courtesy of: Mark Eirich

View additional discussion.