JSFiddle - React, Tailwind, and code Playground

HTML

<div id="overlay"></div>

<iframe src="http://google.com" id="iframe">

CSS

#overlay {
    height:200px;
    width:200px;
    position:absolute;
    top:0;
    background-color:green;
    pointer-events:none;
    opacity:0;
}

#iframe {
    height:300px;
    width:300px;
}

JavaScript

$("#iframe").hover(
    function(){ $("#overlay").animate({ opacity: 1 }, 'slow'); },
    function(){ $("#overlay").animate({ opacity: 0 }, 'slow'); }
);