i have made an example with using other codes, to display \[code\]'info <DIV>'\[/code\] to show up when mouseover on image, but i m having problem when i try to show \[code\]"caption <DIV>"\[/code\] over the image. i have tried to add codes in the css but anything i do stops \[code\]"info <DIV>"\[/code\] to show up 
can some one please look into this set of code :jsfiddleand if the \[code\]"info <DIV>"\[/code\] can be displayed in a separate \[code\]<div>\[/code\] it would be great help.thanksregards.code html\[code\]<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Critical-icon.png" class="team"/><div class="info">"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR></div><div class="caption">SYMBOL</div> <img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Favourite-1-icon.png" alt="" class="team"/><div class="info">and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR></div><div class="caption">STAR</div>?\[/code\]CSS code\[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\]
can some one please look into this set of code :jsfiddleand if the \[code\]"info <DIV>"\[/code\] can be displayed in a separate \[code\]<div>\[/code\] it would be great help.thanksregards.code html\[code\]<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Critical-icon.png" class="team"/><div class="info">"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR></div><div class="caption">SYMBOL</div> <img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Favourite-1-icon.png" alt="" class="team"/><div class="info">and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR></div><div class="caption">STAR</div>?\[/code\]CSS code\[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\]