JSFiddle - React, Tailwind, and code Playground

by timmah

HTML

<div class="grow pic">
    <div class="tooltip-wrap">
        <img src="some-image.jpg">
        <div class="tooltip-content">
            <img src="someimage.jpg">
        </div>
    </div>      
</div>

CSS

/*GROW*/
.grow img {
  height: 100px;
  width: 100px; 

  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.grow img:hover {
  width: 256px;
  height: 256px;
}

.tooltip-wrap {
  position: relative;
}
.tooltip-wrap .tooltip-content {
  display: none;
  position: fixed;
  bottom: 50%;
  left: 20%;
  right: 10%;
  background-color: #fff;
  padding: .5em;
}
.tooltip-wrap:hover .tooltip-content {
  display: block; 
    border:solid 1px green;
}
div.tooltip-wrap > img {
    border:solid 1px blue;
}
div.grow {
    border:solid 1px red;
}