JSFiddle - React, Tailwind, and code Playground

by vjeux

HTML

<div class="story">
    <div class="header">header</div>
    <div class="footer">footer</div>
</div>

CSS

html { height: 1000px; }
.story {
    width: 100px;
    margin: 100px;
    height: 100px;
    background-color: red;
    position: relative;
}

.header {
    background-color: rgba(0, 0, 0, 0.5);
}

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: blue;
}
    
/* Transition code */

.header, .footer {
    -webkit-transition: opacity 100ms linear;
    opacity: 1;
}

.story:hover .header:hover,
.story:hover .footer:hover {
    -webkit-transition-delay: 0s;
    opacity: 1;
}

.story:hover .header,
.story:hover .footer {
    -webkit-transition-delay: 1s;
    opacity: 0;
}