JSFiddle - React, Tailwind, and code Playground

by DelphinPRO

HTML

<div class="banner-box">
                        <a class="clearfix banner-box-banners" href="#" target="_self">
                            <img alt="banner-2" class="img-responsive" src="http://chloe.promo-z.ru/pictures/news/4431.png">
                            <span class="s-desc">
                                <span class="s-desc-title">
                                    <span>Корм</span>
                                </span>
                            </span>
                        </a>
                    </div>

CSS

.banner-box {
    position: relative;
}
.banner-box > a {
    display: flex;
}
.banner-box > a img {
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    width: 100%;
}
.s-desc {
    position: absolute;
    bottom: 56px;
    left: 30px;
    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;
}
.s-desc .s-desc-title {
    font-size: 46px;
    color: #ffd200;
    margin-bottom: 5px;
    display: block;
    height: 100px;
    border: 3px solid red;
}
.s-desc .s-desc-title span {
    color: black;
    background: #FFD400;
    /*transform: translateX(64%);*/
    font-size: 22px;
    opacity: 0.8;
    padding: 13px;
    font-weight: bold;
    font-family: CirceExtraBold;
}
.s-desc .s-desc-title span {
    margin-top: -5px;
    text-transform: uppercase;
    display: block;
    font-weight: 500;
    font-size: 36px;
    color: #20282e;
}