JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mouseoff" id="tmp"></div>

CSS

.mouseoff{
    display:inline-block;
    width: 100px;
    height: 100px;
    padding:5px;
    margin:10px;
    border:1px solid #ccc;
    background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transition: 0s background-size;
    transition-delay:1s;
}
.mouseon{
	background-size: contain;
    background-color:red;
}

JavaScript

$("#tmp").hover(function() {
  
    /* Mouse enter */
    var thisone = $(this);
    window.mytimeout = setTimeout(function() {
        thisone.addClass("mouseon");
    }, 1000);
  
}, function() {
  
    /* Mouse leave */
    clearTimeout(window.mytimeout);
    $(this).removeClass("mouseon");
});