JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cssimage">
     <img src="files/images/css3.jpg"/>
</div>


<div id="htmlimage">
     <img src="files/images/html5.jpg"/>
</div>

<div class="htmlhover">html Test message</div>
<div class="csshover">CSS 3 Test message</div>

CSS

.csshover {
    display: none;
    float: left;
    width: 100%;
}

#cssimage {
    float: left;
    width: 20%;
}

#cssimage:hover ~ .csshover {
    display: block;
}

.htmlhover {
    display: none;
    float: left;
    width: 100%;
}

#htmlimage {
    float: left;
    width: 20%;
}

#htmlimage:hover ~ .htmlhover {
    display: block;
}