title: Two divs to display on image mouseover
body: <hr>
  
  <blockquote>
    <p>finally figured out the result , used both js and css together to work,
    thanks guys :)
    <strong><a href="http://jsfiddle.net/GKa9p/1/" rel="nofollow">FINAL JSFIDDLE CODE</a></strong></p>
    
    <p><strong>find codes below</strong></p>
    
    <hr>
  </blockquote>
  
  <p>i have made an example with using other codes, to display <code>'info &lt;DIV&gt;'</code> to show up when mouseover on image, but i m having problem when i try to show <code>"caption &lt;DIV&gt;"</code> over the image. i have tried to add codes in the css but anything i do stops <code>"info &lt;DIV&gt;"</code> to show up :(</p>
  
  <p>can some one please look into this set of code :<a href="http://jsfiddle.net/gygHg/32" rel="nofollow">jsfiddle</a></p>
  
  <p>and if the <code>"info &lt;DIV&gt;"</code> can be displayed in a separate <code>&lt;div&gt;</code> it would be great help.
  thanks
  regards.</p>
  
  <p><strong>code html</strong></p>
  
  <pre><code>&lt;img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Critical-icon.png" class="team"/&gt;
  
  &lt;div class="info"&gt;"this is a symbol"&lt;BR&gt;"this is a symbol"&lt;BR&gt;"this is a symbol"&lt;BR&gt;"this is a symbol"&lt;BR&gt;"this is a symbol"&lt;BR&gt;"this is a symbol"&lt;BR&gt;"this is a symbol"&lt;BR&gt;"this is a symbol"&lt;BR&gt;&lt;/div&gt;
  
  &lt;div class="caption"&gt;SYMBOL&lt;/div&gt; 
  
  &lt;img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Favourite-1-icon.png" alt="" class="team"/&gt;
  
  &lt;div class="info"&gt;and this is a star&lt;BR&gt;and this is a star&lt;BR&gt;and this is a star&lt;BR&gt;and this is a star&lt;BR&gt;and this is a star&lt;BR&gt;and this is a star&lt;BR&gt;and this is a star&lt;BR&gt;&lt;/div&gt;
  
  &lt;div class="caption"&gt;STAR&lt;/div&gt;
  ​
  </code></pre>
  
  <p><strong>CSS code</strong></p>
  
  <pre><code>.team , .info{
   background: #151515;
   height: 150px;
   width: 150px; 
  
  }
  .info{
  
      background:white;
      height: 50%;
      width: 20%;
      display:none;
  position: absolute; 
      top: 10px;
      right: 10px;
  }
  
  
  .team:hover + .info {
  
     display:block; }
  
  
  .team {
     opacity: 1;
     transition: opacity .25s ease-in-out;
     -moz-transition: opacity .25s ease-in-out;
     -webkit-transition: opacity .25s ease-in-out;
     }
  
     .team:hover {
        opacity: 0.5;
        }​
  </code></pre>