JSFiddle - React, Tailwind, and code Playground

HTML

<p class="one">HOVER OVER ME - IMG IS SIBLING</p>
     <img src="http://www.placecage.com/100/100">
<p class="two">HOVER OVER ME -IMG IS CHILD</p>
    <img src="http://www.placecage.com/100/100">

CSS

img {
    visibility: hidden;
    opacity: 0;
    height: 0;
    transition: height .5s linear, opacity .5s linear;
}

p.one:hover + img {
    visibility: visible;
    opacity: 1;
    height: 100px;
    transition-delay: 0s;
}

p.two:hover + img {
    visibility: visible;
    opacity: 1;
    height: 100px;
    transition-delay: 0s;
}