JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<a href="http://zornet.ru/load/85" target="blank">
<div class="zornet_ru_timodsa">
    <article class="samturehvun">
        <img class="samturehvun__media" src="http://zornet.ru/Aben/ABGDA/zornet_ru/kersa/4ZPIczYcSPGV8bEMa9ELtA.png" />
        <div class="samturehvun__overlay">
            <h1 class="samturehvun__overlay__title">ZORNET.RU</h1>
            <p class="samturehvun__overlay__content">
                С их помощью вы можете быстрее загружать игры, переходить на ваш телевизор, управлять более комфортно и даже прыгать в виртуальную реальность. И если вы просто ищете идеи для подарков, эта передача очень хорошо послужит энтузиасту ПК в вашей жизни.
            </p>
        </div>
    </article>
</div>
</a>

CSS

body {
    font: normal 16px/1.5 Arial, sans-serif;
}



h1, p {
 margin: 0;
 padding: 0 0 .5em;
}

.zornet_ru_timodsa {
 margin: 0 auto;
 max-width: 480px;
}

/*
 * samturehvun component
 */
.samturehvun {
 position: relative;
 overflow: hidden;

 /* Only the -webkit- prefix is required these days */
 -webkit-transform: translateZ(0);
 transform: translateZ(0);
}

.samturehvun::before {
 content: ' ';
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background: transparent;
 transition: background .35s ease-out;
}

.samturehvun:hover::before {
 background: rgba(0, 0, 0, .5);
}

.samturehvun__media {
 display: block;
 min-width: 100%;
 max-width: 100%;
 height: auto;
}

.samturehvun__overlay {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 padding: 10px;
 color: white;

 -webkit-transform: translateY(100%);
 transform: translateY(100%);

 transition: -webkit-transform .35s ease-out;
 transition: transform .35s ease-out;
}

.samturehvun:hover .samturehvun__overlay {
 -webkit-transform: translateY(0);
 transform: translateY(0);
}

.samturehvun__overlay__title {
 -webkit-transform: translateY( -webkit-calc(-100% - 10px) );
 transform: translateY( calc(-100% - 10px) );

 transition: -webkit-transform .35s ease-out;
 transition: transform .35s ease-out;
}

.samturehvun:hover .samturehvun__overlay__title {
 -webkit-transform: translateY(0);
 transform: translateY(0);
}