How to automatically add text to image on hover - css

Question

I have an image that I would like to add text to. I don't know what the best method would be. I have seen the map tag in HTML but I don't know if that helps me. For each individual part of the image, I'd like to add a text next to it on hover.
My best solution so far is to make a div with the image as a background image, and have multiple spans for each part of my image, but that stopped working precisely when rescaling the image.

Answer 1

Here is a snippet for you.
$('.hover-with-caption').on('mousemove',function(e){
$('#dynamicCaption').remove();
$('body').append("<span id='dynamicCaption' class='dynamic-caption'></span>");
$('#dynamicCaption').text('what ever you want to show here!! '+event.pageX + ", " + event.pageY); // you need to decide what to show and how you are going to generate the caption, As you have not given mush info about it.
$('#dynamicCaption').finish().toggle(100).
css({
top: e.pageY + "px",
left: e.pageX + "px"
});
$(document).off("click.customCaption").on("click.customCaption", function (e) {
// alert('context menu other mouse events');
if (!$(e.target).parents('#dynamicCaption').length > 0) {
$('#dynamicCaption').remove();
}
});
});
div.parent{
width:200px;
height:150px;
position: relative;
border: 1px solid black;
cursor:pointer;
}
img{
width:200px;
height:150px;
}
.dynamic-caption {
display: none;
z-index: 1000;
position: absolute;
overflow: hidden;
border: 1px solid #CCC;
white-space: nowrap;
font-family: sans-serif;
background: #FFF;
color: #333;
border-radius: 0px;
list-style-type: none;
padding-left: 0px;
min-width: 100px;
margin-bottom:0px;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<img class="hover-with-caption" src="http://cdn.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif" />
</div>
Hope this helps you out.