JSFiddle - React, Tailwind, and code Playground

by maharajan a

HTML

<div class="normal">Hover</div>

CSS

div.normal{
    width:100px;
    padding: 11px 16px;
    text-align:center;
    float:left;
    background: #ff3232;
    /* Old browsers */
    background: linear-gradient(to left, red 50%, blue 50%);
    background-size: 200% 100%;
    background-position:right bottom;
    margin-left:10px;
    transition:all 2s ease;
}
div.normal.hovered {
    background-position:top left;
}

JavaScript

$(document).ready(function() {
$('div').hover(function() {
$(this).addClass('hovered')
},function() {$(this).removeClass('hovered')});

});