JSFiddle - React, Tailwind, and code Playground

by Jogesh Sharma

HTML

<article>
<div class = "box-ovrly ovrly">
      <h2 class="box-title"><a href="<?php the_permalink(); ?>" rel="bookmark">the_title</a></h2>
      <div class="box-meta">cat,1</div>
</div>
</article>

CSS

article{width:300px;min-height:300px;background:#efefef;position:relative;text-align:center;}

.ovrly{position:absolute;background:none;opacity:0;transition: all 0.5s linear 0.2s;width:100%;height:100%;}
.ovrly_start{
    top:0px;opacity:1;transition: opacity 0.5s linear 0.2s;
    background:#ff6600;
}

JavaScript

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

$('article').hover( 
    function () {
        var color = getRandomColor();
        $('.box-ovrly', this).addClass('ovrly_start');
        $('.box-ovrly', this).css('background', color);        
    }, 
    function() {
        $('.box-ovrly', this).removeClass('ovrly_start');
    }
);