JSFiddle - React, Tailwind, and code Playground

HTML

<div class="thumbnail">
    <div class="thumbnail-title">Some Text</div>
    <img src="http://s3.goodfon.ru/image/405615-640x480.jpg">
</div>

CSS

.thumbnail {
    width: 400px;
    
    position: relative;
}

.thumbnail:before {
    content: '';
    
    visibility: hidden;
    opacity: 0;
    
    position: absolute;
    top: 0;       left: 0;
    bottom: 0;    right: 0;
    
    background: rgba(0, 0, 0, 0.6);
    
    -webkit-transition: 0.2s ease-in-out;
    -webkit-transition-property: visibility, opacity;
    
    transition: 0.2s ease-in-out;
    transition-property: visibility, opacity;
}

.thumbnail:hover:before {    
    visibility: visible;
    opacity: 1;
}

.thumbnail-title {
    content: '';
    
    position: absolute;
    top: auto;    left: 0;
    bottom: 0;    right: 0;
    
    padding: 10px 14px;
    
    border-bottom: 0px solid #E6480A;
    
    text-transform: uppercase;
    font: 700 30px 'arial';
    color: #fff;
    
    -webkit-transition: border-width 0.2s ease-in-out;    
    transition: border-width 0.2s ease-in-out;
}

.thumbnail:hover .thumbnail-title {    
    border-bottom-width: 20px;
}

.thumbnail img {
    display: block;
    max-width: 100%;    
}