JSFiddle - React, Tailwind, and code Playground

HTML

<div class="banners row" id="banner0">
                <div class="col-sm-4 banner-1">
                    <div class="banner-box">
                        <a class="clearfix banner-box-banners" href="#" target="_self">
                            <img alt="banner-1" class="img-responsive" src="http://minionomaniya.ru/wp-content/uploads/2016/01/%D0%9A%D0%B5%D0%B2%D0%B8%D0%BD.jpg">
                            <span class="s-desc">
                                <span class="s-desc-title">
                                    <span>Игрушки</span>
                                </span>
                            </span>
                            <span class="cover-bg"></span>
                            <p class="cover-title">Подробнее</p>
                        </a>
                    </div>
                </div>

                


            </div>

CSS

img{
    width:100%;
    height:264px;
}
.banners.row {
    margin-top: 20px;
}
.banners > div .banner-box {
    position: relative;
}
.banners > div .banner-box > a {
    display: flex;
}
.banners > div .s-desc {
    position: absolute;
    bottom: 67px;
    width: 100%;
    z-index: 999;
    text-align: left;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.banners>div .s-desc .s-desc-title {
    font-size: 46px;
    color: #ffd200;
    margin-bottom: 5px;
    display: block;
    text-align: center;
    height: 100px;
}
.banners > div .s-desc .s-desc-title span {
    color: black;
    background: #FFD400;
    font-size: 22px;
    opacity: 0.8;
    padding: 13px;
    font-weight: bold;
    font-family: CirceExtraBold;
}
.banners > div .s-desc .s-desc-title span {
    text-transform: uppercase;
}
.cover-bg {
    background: #FFD400;
    -khtml-opacity: .6;
    -moz-opacity: .6;
    opacity: .6;
}
.cover-bg, .cover-title {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.cover-title {
    color: #000;
    font-size: 14px;
    text-align: center;
    background: white;
    padding: 12px 15px 3px 15px;
    height: 29px;
    width: 140px;
    margin: 0 auto;
    border-radius: 33px;
    top: 169px;
}
.cover-bg, .cover-title {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.banner-box-banners:hover .cover-bg, .banner-box-banners:hover .cover-title {
    display: block;
}
.banners .banner-box a:hover {
    -webkit-box-shadow: inset 0 0 130px 60px rgba(32, 40, 46, 0.6);
    -moz-box-shadow: inset 0 0 130px 60px rgba(32, 40, 46, 0.6);
    box-shadow: inset 0 0 130px 60px rgba(32, 40, 46, 0.6);
}
.banner-box:hover {
    background: #ffdc00;
}