JSFiddle - React, Tailwind, and code Playground

HTML

<div class="my_elements_container">
    <div class="my_element">
        <div class="my_faded_element">
            
        </div>
    </div>
    <div class="my_element">
        <div class="my_faded_element">
            
        </div>
    </div>
    <div class="my_element">
        <div class="my_faded_element">
            
        </div>
    </div>
</div>

CSS

.my_element .my_faded_element{
    visibility:hidden;
    opacity:0;
    transition:visibility 0s linear 0.2s,opacity 0.2s linear;
}
.my_element:hover .my_faded_element{
    visibility:visible;
    opacity:1;
    transition-delay:0.3s;
    
    border: 1px solid black;
    background: darkred;
    height: 58px;
    width: 58px;
}
.my_element{
    border: 1px solid black;
    background: #eee;
    height: 60px;
    width: 60px;
    margin: 20px;
    padding: 10px;
}