JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div class="item">
    <div class="mask"></div>
    Some content<br />
    - <a href="#">Some links</a><br />
    - <a href="#">Any link</a>
</div>

CSS

.item {
    position: relative;
    width: 200px;
    height: 150px;
    padding: 10px;
    background: #eee;
    overflow: hidden;
}

.item .mask {
    position: absolute;
    width: 100%; height: 100%;
    top: 0%; left: 0%;
    background: #f00;
    transition: all 0.5s 0s;
    z-index: 999;
}

.item:hover > .mask {
    top: 100%; opacity: 0;
}

JavaScript

/* there are have no scipts ;) */