JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="showhide" class="spookCont" >
<div id="spook" class="spookerOff">

</div>
</div>

<p>Nam lacinia sapien quis fermentum ultrices. Suspendisse potenti. Fusce cursus ullamcorper ante nec molestie. Curabitur eget bibendum diam. Sed bibendum neque eget pulvinar sodales. Ut sapien ipsum, sollicitudin a nisl ut, placerat feugiat elit. Donec non magna non purus <a href="#" onmouseover="tog(), setTimeout(remove, 5000)">link</a> finibus posuere. Quisque posuere ac nunc eu eleifend. Aliquam congue sed eros sed hendrerit. Suspendisse accumsan luctus vestibulum.</p>

<p id="para1" class="col1">Nullam eu maximus arcu, sed porttitor libero. Nam sit amet euismod erat. Suspendisse tempor mollis erat, id gravida orci. Curabitur lacinia ut diam id ullamcorper. Maecenas semper tempor velit vel aliquet. Curabitur luctus ut lectus eu interdum. Quisque volutpat ac elit at ornare. Sed vitae egestas lorem, vel tempor elit. Nulla vel fermentum leo. Donec ullamcorper congue mollis. Vestibulum pellentesque sem ligula, ac tempus purus fermentum eu.</p>

<p>Nam lacinia sapien quis fermentum ultrices. Suspendisse potenti. Fusce cursus ullamcorper ante nec molestie. Curabitur eget bibendum diam. Sed bibendum neque eget pulvinar sodales. Ut sapien ipsum, sollicitudin a nisl ut, placerat feugiat elit. Donec non magna non purus  finibus posuere. Quisque posuere ac nunc eu eleifend. Aliquam congue sed eros sed hendrerit. Suspendisse accumsan luctus vestibulum.</p>

<p>Nam lacinia sapien quis fermentum ultrices. Suspendisse potenti. Fusce cursus ullamcorper ante nec molestie. Curabitur eget bibendum diam. Sed bibendum neque eget pulvinar sodales. Ut sapien ipsum, sollicitudin a nisl ut, placerat feugiat elit. Donec non magna non purus  finibus posuere. Quisque posuere ac nunc eu eleifend. Aliquam congue sed eros sed hendrerit. Suspendisse accumsan luctus vestibulum.</p>

<p>Nam lacinia sapien quis fermentum ultrices. Suspendisse potenti. Fusce cursus ullamcorper ante nec molestie. Curabitur...

CSS

body {margin:0;}

.spookCont {display:none;}
.spookCont2 {width:100%;height:100%;z-index:50;position:absolute;top:0%;}


.spookerOff {margin:0 auto;max-width:400px;height:100%;background:none;background-position:center;background-repeat: no-repeat;background-size:100% auto;}

.spookerOn {margin:0 auto;max-width:400px;height:100%;background:url(https://www.kisbridgingloans.co.uk/finance-news-img/the-european-union-will-collapse-in-2017.jpg);background-position:center;background-repeat: no-repeat;background-size:100% auto;
opacity: 1;animation: fade 5s linear;}
@keyframes fade {
  0%, 50% { opacity: 1 }
  100% { opacity: 0 }
}

JavaScript

function tog(){
if(document.getElementById("showhide").className.match(/(?:^|\s)spookCont(?!\S)/) ) {document.getElementById("showhide").className = "spookCont2";}
if(document.getElementById("spook").className.match(/(?:^|\s)spookerOff(?!\S)/) ) {document.getElementById("spook").className = "spookerOn";} 
}

function remove() {document.getElementById('showhide').style.display='none';}

function play() {
var audio = document.getElementsByTagName("audio")[0];
audio.play();
}