JSFiddle - React, Tailwind, and code Playground

by Daniel Redwood

HTML

<div class="cont">
    
    <div class="controls">controls<div>
</div>
<div class="cont">
    
    <div class="controls">controls<div>
</div>
<div class="cont">
    
    <div class="controls">controls<div>
</div>

CSS

.cont {
    height: 200px;
    margin: 0 0 20px 0;
    background: #f7f7f7;
    overflow: hidden;
}
    .controls {
        opacity: 0;
        width: 200px;
        margin: 25% auto 0 auto;
        background: #fff;
        font-size: .75em;
        text-align: center;
        -webkit-transition: opacity .3s ease-out;
        -moz-transition: opacity .3s ease-out;
        -ms-transition: opacity .3s ease-out;
        -o-transition: opacity .3s ease-out;
        transition: opacity .3s ease-out;
    }
        .showControls .controls {
            opacity: 1;
            -webkit-transition: opacity 1s ease-out;
            -moz-transition: opacity 1s ease-out;
            -ms-transition: opacity 1s ease-out;
            -o-transition: opacity 1s ease-out;
            transition: opacity 1s ease-out;
        }

JavaScript

var time;

$('body').on('mousemove', '.cont', function(){

    var thiis = $(this);
    
    if (time){
        
        clearTimeout(time);
    }
    
    thiis.addClass('showControls');
    
    time = setTimeout(function(){
    
        thiis.removeClass('showControls');
    }, 2000);
});