JSFiddle - React, Tailwind, and code Playground

by Ritesh Pandey

HTML

<!-- Playing with CSS Transitions -->
<div class="image-wrap">
    <div class="black"></div>
    <div class="extra-info"></div>
</div>

CSS

.image-wrap{
    background-image: url("https://lh6.googleusercontent.com/-ihCc_RjUtXI/U2i95vXTCNI/AAAAAAAADJs/9PBHytugkt8/s640/blogger-image--1851448877.jpg");
    height: 200px;
}
.black{
    height: 150px;
}
.image-wrap:hover .extra-info{
    background-color: green;
    opacity: 0.2;
    transition: height 5s ease;
    height: 50px;
}