JSFiddle - React, Tailwind, and code Playground

by LimitedWard

HTML

<script src="http://blurjs.com/blur.min.js"></script>
Try hovering over the image.
<div id="videoContainer">
    <!-- <img class="videoEsque" src="http://placekitten.com/300/300" /> -->
    <div id="controls">The controls go here</div>
</div>
As you can see, the blur updates whenever the image receives a hover event. This code can be modified to work with videos.

CSS

#videoContainer{
    position:relative;
    background:...

JavaScript

$('#videoContainer').hover(function() {
    $('#controls').blurjs({
        source: '#videoContainer',
        radius: 7,
        overlay: 'rgba(255,255,255,0.4)'
    });
});