CODEWITHSUNDEEP
jquerycss
manish nautiyal
manish nautiyal

Reputation: 2584

how to display image on mouse over by css

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.

enter image description here

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;
}

Upvotes: 0

Views: 471

Answers (4)

techfoobar
techfoobar

Reputation: 66663

Updated demo: http://jsfiddle.net/n66Tf/1/

You can use the CSS :after psuedo element to create a customized tooltip element.

Check this demo: http://jsfiddle.net/n66Tf/

HTML:

<!-- render the tooltip text from the server itself -->
<a href="http://google.com" tooltip="Hello World">Hello</a>

CSS:

a {
    position: relative;
    overflow: visible;   
}
a:hover:after {
    content: attr(tooltip); /* use the tooltip attribute instead of hardcoding */
    color: blue;
    top: 22px;
    position: absolute;
    white-space: nowrap;
}

Upvotes: 2

Andy
Andy

Reputation: 14575

You could use the sibling ~ selector like so: http://jsfiddle.net/Zp2Bv/

Upvotes: 1

Sirwan Afifi
Sirwan Afifi

Reputation: 10824

this tutorial can help you : http://net.tutsplus.com/tutorials/javascript-ajax/build-a-better-tooltip-with-jquery-awesomeness/

Upvotes: 0

Fseee
Fseee

Reputation: 2631

I'll use a plugin like jQuery tooltip and then display the tooltip as an image

Upvotes: 1

Related Questions