how to map an image when its appear on hover - html

Question

i m using a hover effect to change the images.when i hover on the first image it shows the another image which hasfew names which i want to link but coz this image is not visible in dreamweaver so i m unable to map it.
Here is the CSS for this:
div#content .promo{
display:block;
position:relative;
width:170px;
height:170px;
/* border:1px solid #f00;*/
float:left;
margin:10px;
/* border-radius:100px;*/
}
#content .promo .mask {
height: 100%;
width: 100%;
left: 0;
top: 0;
opacity: 1.0;
position: absolute;
transition: opacity 0.45s ease-in 0s;
z-index: 1;
background-color:#FFFFFF;
/* border-radius:100px;*/
}
#content .promo:hover .mask {
opacity: 0;
filter:alpha(opacity=0);
}
Here is the code for image in div:
<div id="content">
<div class="promo">
<img src="http://pearlacademy.com/wp-content/uploads/2013/02/Circles-back-01.png" />
<div class="mask">
<img src="http://pearlacademy.com/wp-content/uploads/2013/02/style.png"/>
</div>
</div>
</div>

Answer 1

There you go...
HTML
<div class="map">
<img src="http://pearlacademy.com/wp-content/uploads/2013/02/Circles-back-01.png" alt="Pearl" />
</div>
CSS
.map {position: relative;}
.link {position: absolute; width: 150px; height: 40px;}
.link.link1 {top: 20px; left: 10px;}
.link.link2 {top: 60px; left: 10px;}
.link.link3 {top: 100px; left: 10px; height: 50px;}
Fiddle: http://jsfiddle.net/praveenscience/6uwRP/
Do you want something like this?
HTML
<div class="promo">
<img src="http://pearlacademy.com/wp-content/uploads/2013/02/Circles-back-01.png" />
<img src="http://pearlacademy.com/wp-content/uploads/2013/02/style.png" class="hover" />
</div>
CSS
.promo img.hover,
.promo:hover img {display: none;}
.promo:hover img.hover {display: inline;}
Fiddle: http://jsfiddle.net/praveenscience/dYExh/