JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="lotunisam_gunrem">
            <div class="zornet_rusvetsa">
                <img src="http://zornet.ru/Aben/ABGDA/zornet_ru/kersa/zornet.png">
            </div>
            <div class="dekimartan">
                <h2>ZorNet: Создание uCoz</h2>
                <p>Покупка использованного графического процессора может показаться одним из способов уклониться от высоких текущие карты.</p>
            </div>
        </div>

CSS

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}



.lotunisam_gunrem {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 293px;
    height: 261px;
    background: #262626;
    overflow: hidden;
}
.lotunisam_gunrem .zornet_rusvetsa,
.lotunisam_gunrem .dekimartan {
    width: 100%;
    height: 100%;
    position: absolute;
    box-sizing: border-box;
    transition: .5s;
}
.lotunisam_gunrem .zornet_rusvetsa {
    top: 0;
    left: 0;
}
.lotunisam_gunrem:hover .zornet_rusvetsa {
    top: 0;
    left: -100%;
}
.lotunisam_gunrem .zornet_rusvetsa img {
    width: 100%;
}
.lotunisam_gunrem .dekimartan {
    background: #262626;
    top: 0;
    left: 100%;
    padding: 60px 30px;
}
.lotunisam_gunrem:hover .dekimartan {
    top: 0;
    left: 0%;
}
.lotunisam_gunrem .dekimartan h2 {
    color: #effb92;
    text-align: center;
    margin: 0;
    padding: 0 0 5px;
    border-bottom: 2px solid #f1ecec;
}
.lotunisam_gunrem .dekimartan p {
    margin: 14px 0 0;
    color: #fbf2f2;
    text-align: justify;
    cursor: pointer;
}