JSFiddle - React, Tailwind, and code Playground

by Asif Sharif Shahid

HTML

<div class="bottle-container">
<div class="click-to-top"><img src="http://lorempicsum.com/futurama/350/200/1" alt="Image 1" /><span>Tooltip text</span></div>
<div class="click-to-top" style="z-index:5;"><img src="http://lorempicsum.com/futurama/350/200/1" alt="Image 2" /></div>
<div class="click-to-top last"><img src="http://lorempicsum.com/futurama/350/200/1" alt="Image 3" /></div>
</div>

CSS

container{
max-width:600px;
margin:0 auto;
min-height:450px;
}

div.click-to-top {
display:inline-block;
position:relative;
max-width:160px;
}

div.click-to-top:hover{
z-index:10;
}

div.click-to-top img{
-webkit-transition: all 0.8s;
moz-transition: all 0.8s;
transition: all 0.8s;
width:130px;
}

div.click-to-top img:hover{
width:140px;
z-index:10;
}

div.click-to-top span {display: none; position: absolute; bottom: 0; left: 0; right: 0; background: #333; color: #fff; }
div.click-to-top:hover span {display: block; }