JSFiddle - React, Tailwind, and code Playground

by Silambarasan_sundaram

HTML

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
  

  
  <style type='text/css'>

      .team img {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    
}
.team .caption {
    position: absolute;
    bottom: 1px;
    right: 0px;
    width: 100%;
    height: 25%;
    display: none;
    z-index: 2;
    text-align: right;
    color: #ffffff;
    padding: 10px;
    background: rgba(0, 0, 0, .75);
    
}
      
.team .caption a {
    color: #ffffff;
}
  </style>
  



<body>
  <script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$('.team').mouseover(function() {
    $(this).find('.caption').fadeIn(100);
});

$('.team').mouseleave(function() {
    $(this).find('.caption').fadeOut(100);
});
});//]]>  

</script>
      <script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$('.team').hover(function() {
    $(this).find('.info').fadeIn(100);
});

$('.team').mouseleave(function() {
    $(this).find('.info').fadeOut(100);
});
});//]]>  

</script>
 
<div class="team">
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Critical-icon.png" >
    
<div class="caption">SYMBOL</div>
    
<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>

<div class="team">
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Favourite-1-icon.png">
    
<div class="caption">STAR</div>
    
<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>
  
</body>

CSS

.team {
 background: #151515;
 height: 150px;
 width: 150px; 
    position: relative;
 
}
.info{
    background:white;
    height: 100%;
    width: 100%;
    display:none;
position:fixed;
    float:right;
    top: 0px;
    left: 70% ;
    z-index: 99;
}


.taeam {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

   .taeam:hover {
      opacity: 0.5;
      }