How to display text over image

Question

I want to display text over image. Whenever someone hover mouse over the image.

My Div block is:

<div class="MainDIV">
<br><br><br>
<div class="popular_stores"  align="center">

    <span style="font-size: 12pt;">Browse our list of stores that we have coupons, coupon codes, and promo codes for.
    </span>
    <br>
    <ul>
    <li>
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR31R-rZO7MBzgGMrZlpa7C0-tx3CmzVz6pha7kt8Fw6PjpsMGENg" style="width: 100px;height: 50px;" >
    </li>
    <li>
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR31R-rZO7MBzgGMrZlpa7C0-tx3CmzVz6pha7kt8Fw6PjpsMGENg" style="width: 100px;height: 50px;" >
    </li>
    <li>
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR31R-rZO7MBzgGMrZlpa7C0-tx3CmzVz6pha7kt8Fw6PjpsMGENg" style="width: 100px;height: 50px;" >
    </li>
</ul>
</div></div>

And rest of the CSS and JavaScript Function is:

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

$('.drama').mouseover(function(){
    alert("dss");
    var tt = $(this).parent().find('.toolTip');
    tt.html($(this).attr('title'));
    tt.show();
});
$('.drama').mouseout(function(){
    var tt = $(this).parent().find('.toolTip');
    tt.hide();
});

</script> 


<style type="text/css">

body {
    text-align: center;
    }

.MainDIV{
    padding:0;
    width:700px;    
    display: inline-block;  
    background-color:white;
    }

.MainDIV ul
{ 
list-style-type: none;
}

.MainDIV  ul li { 
    display: inline-block;
    padding : 1em;
    }

.MainDIV ul li img
{

    padding: .2em ;
    border-radius: 10px;
    -moz-border-radius: 10px;
    background-color: #F5F5E3;
}

ul li div{display:none; background:white; opacity:.5; position:absolute;}

What i am trying to do is shown here.please take a look :click here

Similar to this page i want to display text over the image whenever someone hover mouse on the image. Can someone please help me out...

They are only using CSS to accomplich this. There are about 1001 ways to do this. — SpYk3HH, Apr 22 '13 at 17:28
And i am displaying 'li' as inline-block so i can't place another DIV block. It will spoil my Html structure..... — Vaibhav Jain, Apr 22 '13 at 17:28
They are using `span` tags to do it, which by default are also inline. But you could also float your `li` tags instead of inline. With `position:absolute;` on the `span` tags you can change them from hidden` to `visible` on hover of the `li` — Andy, Apr 22 '13 at 17:32
What about something like this? http://jsfiddle.net/SpYk3/vnZsN/ — SpYk3HH, Apr 22 '13 at 17:47

score 3 · Accepted Answer · edited Feb 08 '16 at 01:29

3

I build up a fiddle with the simpliest way I could think of.

$('#hover1').mouseover(function(){
   $('#hoverDiv1').css('opacity', 1)
});


$('#hover1').mouseout(function(){
   $('#hoverDiv1').css('opacity', 0)
});

Please see this Fiddle

Hover effect is not correctly positioned, because "li" needs to be defined. It is just to show an easy jQuery way.

Best

edited Feb 08 '16 at 01:29

Sulthan Allaudeen

11,330
12
48
63

answered Apr 22 '13 at 17:49

xhallix

2,919
5
37
55

You are displaying image whenever mouse enters the DIV block. But i want to display text whenever mouse hover over the image only.. – Vaibhav Jain Apr 22 '13 at 18:06
the effect occures as soon as the mouse hovers over the li which directly surrounds the image you can also pass the id to – xhallix Apr 22 '13 at 18:10
swap out #hoverDiv1 with the ID of the image you'll add to the image, then the jQuery. – RandomUs1r Apr 22 '13 at 18:12
http://jsfiddle.net/pP23k/1/ please check it out. the effect just occures while hovering the first image. – xhallix Apr 22 '13 at 18:12
Thanks man actually but now the thing is i have to position each text block manually by specifying but how can it be placed over the image independent from left or right of the Html page..Because i have to use this 'ul' in the template(Django). So it should be dynamically done..Not each text hardcoded positioned... – Vaibhav Jain Apr 22 '13 at 18:21
I found the solution at http://stackoverflow.com/questions/14263594/how-to-show-text-on-image-when-hovering?rq=1 – Vaibhav Jain Apr 22 '13 at 18:27
great :) thought you would like to have it in JS not with css – xhallix Apr 22 '13 at 18:28
oh great! after updating your code now i've found that you already found it!!! anyway my solution is here http://jsfiddle.net/pP23k/2/ – maksbd19 Apr 22 '13 at 18:57

How to display text over image

1 Answers1

Linked