JSFiddle - React, Tailwind, and code Playground

HTML

<div class="teaser-box">
					<img src="http://beautycroatia.eu/wp-content/uploads/2016/10/dental-2-600x600.jpg">
					<span class="more"><a href="#">»</a> </span>
					<div class="teaser-box-inner">
						<div class="teaser-box-text">
							<h3>Заповядай приятел!</h3>
							<p>Само си сложи в фикс кутия :)</p>
						</div>
					</div>
				</div>

CSS

.teaser-box-content {padding: 0px; margin: 0px;}
.teaser-box-content li { list-style-type: none; overflow: hidden; position: relative;  float: left; padding: 0px;}
.teaser-box,.teaser-box * {box-sizing: border-box;}
.teaser-box { position: relative; min-height: 400px;}
.teaser-box > img { min-height: 400px; position: absolute; top: 50%; left: 50%;
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.teaser-box-inner { position: absolute; top: auto; left:0; right: 0; bottom: 0; border: 15px solid rgba(0,0,0,0); max-height: 145px; height: 100%;
    animation: slideDownParent cubic-bezier(0.7, 0.26, 0, 0.3) 400ms;
    -moz-animation:slideDownParent cubic-bezier(0.7, 0.26, 0, 0.3) 400ms;
    -webkit-animation: slideDownParent cubic-bezier(0.7, 0.26, 0, 0.3) 400ms;
}
.teaser-box-inner:before { background-color: rgba(0, 0, 0, 0);  bottom: -15px; content: ""; display: block; left: -15px; position: absolute; right: -15px;
    top: -15px; z-index: 0;

}
.teaser-box-inner:after {content: ""; position: absolute;   top: 0px; bottom: 0px; right: 0px; left: 0px; background-color: rgba(0, 144, 189, 0.8); display: block;}

.teaser-box-text { bottom: 0; left: 0;  max-height: 100px; overflow: hidden; padding: 20px 80px 20px 20px; position: absolute; right: 0;
    z-index:1; color:#000;}
.teaser-box-text h3 { font-size: 1.7em; margin: 0; min-height: 76px; line-height: 1.4em;}
.teaser-box-text p { font-size: 1.6em;}
.teaser-box .more { bottom: 40px; color: #fff; font-size: 3.3em; position: absolute; right: 40px; z-index: 100; }
.teaser-box .more a { color: inherit; text-decoration: none;}
.teaser-box:hover .teaser-box-inner { max-height: 1000px;
    animation: slideUpParent ease 1200ms;
    -moz-animation:slideUpParent ease 1200ms;
    -webkit-animation: slideUpParent ease 1200ms;
}
.teaser-box:hover .teaser-box-text { max-height: 1000px;
    animation: slideUpParent cubic-bezier(0.7, 0.26, 0, 0.3)...