span text over the image - html

Question

i am try to dsiplay span text over the image when mouse hover the div.
i am try this.
html
<div id="some-div">
<a href="#"><img class='round_border type_border' src='http://www.jewsnews.co.il/wp-content/uploads/2013/08/Donald_Duck.gif'/>
<span id="some-element">Dounald
</span></a>
</div>
css look like this
<style>
#some-div{
position:relative
}
#some-element {
width:100px;
height:100px;
border: 1px solid orange;
display: none;
font-size: 10px;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
text-transform: uppercase;
position: absolute;
top:0;
left:0;
background:rgba(255,79,50,.5);
color:Black !important;
margin-top:2px;
border:1px solid gray;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
}
#some-div:hover #some-element {
display: block;
position: relative;
cursor: pointer;
color:#FFFFFF;
}
a{
position: relative;
}
.type_border {
width: 100px;
height: 100px;
background: white;
position: absolute;
}
.round_border {
float: left;
border:1px solid gray;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
background: white;
}
</style>

Answer 1

Add position: absolute to span and position:relative to main div
#some-div{
position:relative
}
#some-element {
width:80px;
border: 1px solid #ccc;
display: none;
font-size: 10px;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
text-transform: uppercase;
position: absolute;
top:0;
left:0
}
DEMO

Answer 2

Use Title.
<img class='img' title='Donald Duck' src='http://www.jewsnews.co.il/wp-content/uploads/2013/08/Donald_Duck.gif'/>

Answer 3

If you want text to be displayed on mouse hover image.
You can simply do it by using title attribute of html image element
For ex:
You will be able to see that text when mouse hoveered.
Hope this helps..

Answer 4

Unfortunately as far as i know you cannot insert text on the image.
Workaround for this is to have span in a div which is having background image can work
#some-div{
background-image:url('http://www.jewsnews.co.il/wp-content/uploads/2013/08/Donald_Duck.gif');
background-repeat:no-repeat;
}
check this link http://jsfiddle.net/sy6MG/