JSFiddle - React, Tailwind, and code Playground

by samccone

HTML

<div id='magic_wrap'>
    <span>this is sweet text his is sweet text his is sweet text his is sweet text his is sweet text his is sweet text</span>
    <div id="magic_shit"></div>
</div>

CSS

#magic_wrap
{
    width:200px;
}

#magic_shit
{
    position:relative;
    width:100%;
    background-color:#000000;
    z-index:-1;
}

span
{
    z-index:1;
    color:#FF0000;
    width:100%;
    height:100%;
    display:block;
}

JavaScript

$().ready(function(){
    
    $('#magic_shit').height($('#magic_shit').parent().height());
    $('#magic_shit').css({'top':-$('#magic_shit').prev().height()});
    $('span').hover(function(){
        if(!$(this).next().is(':animated'))
        {
           $(this).next().animate({'opacity':'0.4','backgroundColor':'#000000'});
        }
    },function(){
        $(this).next().animate({'opacity':'1','backgroundColor':'#000000'});
    
}); 
});