title: hover on image displays text next to the image
body: <p>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 </p>
  
  <pre><code>&lt;i&gt;&lt;div class='element7' style='position: absolute; right:-250px; bottom: 400px; z-      index: 4;'&gt;
  &lt;img src='".$donnees[1]."' height='100' width='170' /&gt;&lt;/td&gt;&lt;p style='bottom :  300px;right : 300px;'&gt;some text : image 1 &lt;/p&gt;&lt;/i&gt;
  
  &lt;style type="text/css"&gt; 
  
  .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;
  }
  &lt;/style&gt; 
  </code></pre>