JSFiddle - React, Tailwind, and code Playground

HTML

<img id="picbw" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTvFdC4ExDQtYzckYf52jN7AyFGGUKlzofixmflKsOjhwiiFO0_">
    
    <div id="prompt">info!</div>
    
    <div id="text">this lady is a cyclist!</div>

CSS

#picbw {position:absolute;top:10px;left:10px;width:400px;height:350px;}

#prompt {position:absolute; top:375px; left:20px; width:380px; background-color:blue;}

    #text {position:absolute; top:10px;left:10px;width:400px;height:350px;display:none;color:#c00;}
    
#prompt:hover ~ #picbw {filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);}
        
        #prompt:hover ~ #text {display:block}