CODEWITHSUNDEEP
htmlcss
marcAntoine
marcAntoine

Reputation: 678

hover on image displays text next to the image

I am trying to display text next to the image when the cursor is over the image. i found many codes that display the text OVER the image but Can somebody give me a code for doing that ? i tried this code but it displays the text above the image 

<i><div class='element7' style='position: absolute; right:-250px; bottom: 400px; z-      index: 4;'>
<img src='".$donnees[1]."' height='100' width='170' /></td><p style='bottom :  300px;right : 300px;'>some text : image 1 </p></i>

<style type="text/css"> 

.element7 {
width: 730px;
height: 133px;
line-height: 0px;
color: transparent;
font-size: 50px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",     Helvetica, Arial, "Lucida Grande", sans-serif;
   font-weight: 200;
text-transform: uppercase;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
}

.element7 :hover {
line-height: -20px;
color: #fff;
top:100px;
left:100px;

}

.element7 img{
float: right;
margin: 0 50px;
}
</style>

Upvotes: 0

Views: 5901

Answers (1)

Dejan.S
Dejan.S

Reputation: 19158

Depending on how you make your html but this DEMO works, its just simple css. if your html is more complex you can do this with jquery.

You make a hover on the container and showing the text like that.

<div id="contain">
    <div class="fake-image"></div>
    <div class="text">some text</div>
</div>​

#contain{
    clear: both;
}

.fake-image{
    width: 100px;
    height: 100px;
    background-color: aqua;
    float: left;
    margin-right: 14px;
    cursor: pointer;
}

#contain:hover div.text{
    display: block;
}

.text{
    background-color: yellow;
    float: left; 
    display: none;    
}​

EDIT

Looking at your html that you provided makes no sense at all because you got a </td> but no start tag, if this is a part of a table its better you should post the full html of it.

Upvotes: 2

Related Questions