JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">
    <div class="hover">hover me</div>
    <div class="cool">cool</div>
</div>

CSS

body {
    background-color: black;
}
.hover {
    border: solid red;
    height: 40px;
    width: 40px;
    z-index: 1;
    color: white;
}
iframe {
    position: relative;
    left: 40px;
}
.test {
    border: solid blue;
    position: absolute;
    height: 300px;
    width: 500px;
    z-index: 3;
}
.cool {
    border: solid purple;
    background-color: black;
}

JavaScript

$.fx.interval = -1000;

$(document).ready(function () {
    var frame = $('<iframe></iframe>', {
        width: "370",
        height: "215",
        src: "//tsn.com",
        frameborder: "0",
        style: "display:none;"
    });
    frame.on("load", function (e) {
        $(e.target)
            .fadeIn(1000, "linear");
    });

    $(".hover").on({
        mouseover: function () {
            $('.cool').append(frame)
        }
    });
});

$(document).ready(function () {
    $('.test').hover(function () {



    }, function () {
        $('.cool iframe').detach();

    });
});