JSFiddle - React, Tailwind, and code Playground

by clairesuzy

HTML

<a href="#">hover me<span class="matrix-overlay"></span></a>

CSS

.matrix-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0); /* fallback */
    background: rgba(0,0,0,0);
    color: #fff;
    -webkit-transition: background 2s;
    -o-transition: background 2s;
    -moz-transition: background 2s;
    transition: background 2s;    

    clip: rect(1px 1px 1px 1px); /* IE7 */
    clip: rect(1px,1px,1px,1px);

}

a:hover .matrix-overlay {
    background: rgba(0,0,0,0.5);

    clip: rect(auto); /* IE7 */
    clip: auto;
}