JSFiddle - React, Tailwind, and code Playground

HTML

<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>

CSS

.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;
      }