Show text on image when hover

Question

How am I going to input Click to edit when mouse hover the image, I'm able to do the hover but I can't insert my text when hover. I have create my work at jsfiddle and I must using the HTML source as what I'm doing especially the div class else my design it won't work.

This is HTML source

<a href="#changepic" data-toggle="modal" data-backdrop="static">
<div class="round-pic2 thumbnail" style="background-image: url('http://asianwiki.com/images/a/a4/Andy-lau.jpg');">
</div>
</a>

This is CSS style

.round-pic2 {
display: block;
width: 130px;
height: 130px;
margin: 0em auto;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border-radius: 99em;
-webkit-border-radius: 99em;
-moz-border-radius: 99em;
border: 0px solid gray;
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
}

.round-pic2:hover {
opacity:0.5;
}

DEMO

http://jsfiddle.net/4LjeL/

UPDATE WORKING VERSION

http://jsfiddle.net/4LjeL/2/

Answer 1

Just insert an attribute title in the <div> tag as shown below:

<div class="round-pic2 thumbnail" style="background-image: url('http://asianwiki.com/images/a/a4/Andy-lau.jpg');" title='Click to edit'>

If you wanted an output like the one suggested by @krishna all you have to do is this:

Put a <span> tag within the <div>. In the <span> tag type the desired text, Click to edit in this case, within the <span> tag in the following way:

    <div class="round-pic2 thumbnail" style="background-image: 
url('http://asianwiki.com/images/a/a4/Andy-lau.jpg');">
        <span>Click to edit</span>
    </div>

Add a visibility attribute in the following manner:

.round-pic2 span {
    visibility: hidden;
}

.round-pic2:hover span {
    visibility: visible;
}

Use margin, padding, position attribute to place the text wherever you want.

Answer 2

If You want a real text to be displayed inside that image, I have added a simple <span> with a text that is not visible until hover.

Check this fiddle: http://jsfiddle.net/4LjeL/5/

Answer 3

Here's something you can use: http://jsfiddle.net/TfQ3S/

Basically, I added text inside the div, and set the regular text to be transparent (i.e. you can't see it). On hover, you can change the color of the text so that it appears.

Answer 4

There are two ways to achieve it.

You can use css to do this.You have already got number of answers using css.

The other option is using Jquery code. The following code explains how to use it in you code

you just need to use mouseover and mouseout of jquery like this

$('#imgdiv').mouseover(function() {
  $('#title').text("click to edit");
});

$('#imgdiv').mouseout(function() {
  $('#title').text("");
}); 

Where imgdiv is the id of div. Because you cannot have spaces between the class names.Position the label where ever you want.

Also add this to head of your html

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

Demo