display image on hover with css

Question

I have few images, which come dynamically from database.

When a user hovers over a image, the name should display below the image.

How can I do this with CSS, or jquery?

Check the image below, this is how it should be.

My code is

<div class="blue_strip_icon" style="padding-right: 15px;">
    <a href="<%= pag.page.id %>" class="icon_link">
    <img src="<%= @icon %>" title="<%= pag.page.page_title %>" />
    </a>
</div>

CSS is

.blue_strip_icon{
    float: right;
    height: 50px;
    padding-top: 10px;
}

Answer 1

<div class="blue_strip_icon" style="padding-right: 15px;">
  <a href="<%= pag.page.id %>" class="icon_link">
  <img src="<%= @icon %>" title="<%= pag.page.page_title %>"/>
  </a>
  <div class="title"><%= pag.page.page_title %></div>
</div>

.blue_strip_icon{
    float: right;
    height: 50px;
    width:70px;
    padding-top: 10px;
}

.title{
    width:70px;
    border-radius:20px;
    background:white;
    color:blue;
    border:3px blue solid;
    display:none;

}

​$('.icon_link').hover(function(){
    $(this).next().slideDown(200);
},function(){ 
    $(this).next().slideUp(200);
});​

DEMO

Answer 2

If you want do that by Pure CSS, I recommend you to load your images as background-image in a division (div), which has position: relative and contains a span with the name of image. that span should be hidden and positioned by position: absolute so all you should do is that:

div.CLASS:hover > span.child {
 // show the span or blah blah...
}

Answer 3

Normally the title attribute is interpreted by browsers and shown as tooltip when you hover over the element. So you don't really need jQuery for this.

The problem with this behavior is that you don't really have much control over the formatting of this tooltip. But if you want to show and format this value in some custom section you could subscribe to the .hover() event of those images:

$(function() {
    $('img').hover(function() {
        var title = $(this).attr('title');
        // TODO: do something with the title
    }, function() {
        // this will be triggered when the mouse pointer leaves the element
    });
});