JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="dikolas_muvtezin">
        <img class="img-responsive" src="http://zornet.ru/Aben/ABGDA/zornet_ru/5PNpIBFYQB2dfqnPuvA6Qw.png" alt="">
        <div class="zornet_rulpdsa">
           <h2>ZorNet: Создание сайта на uCoz</h2>
           <a class="dumigateg" href="http://zornet.ru/">Переход</a>
        </div>
    </div>

CSS

.dikolas_muvtezin {
width:100%;
height:100%;
float:left;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
}

.dikolas_muvtezin .zornet_rulpdsa {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: rgba(23, 22, 22, 0.59);
    -webkit-transition: all .4s cubic-bezier(0.42, 0, 0.51, 0.93);
    transition: all .4s cubic-bezier(0.42, 0, 0.46, 0.86);
}

.dikolas_muvtezin img {
display:block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
}

.dikolas_muvtezin h2 {
    text-transform: uppercase;
    color: #f1f0f0;
    text-align: center;
    position: relative;
    font-size: 20px;
    background: rgba(10, 6, 37, 0.81);
    -webkit-transform: translatey(-100px);
    -ms-transform: translatey(-100px);
    transform: translatey(-100px);
    -webkit-transition: all .2s cubic-bezier(0.42, 0, 0.46, 0.9);
    transition: all .2s cubic-bezier(0.42, 0, 0.33, 0.81);
    padding: 9px;
}

.dikolas_muvtezin a.dumigateg {
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    color: #e2dcdc;
    border: 1px solid #f3f0f0;
    background-color: #31313100;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all .2s cubic-bezier(0.42, 0, 0.46, 0.93);
    transition: all .2s cubic-bezier(0.42, 0, 0.45, 0.84);
    margin: 49px 0 0;
    padding: 8px 15px;
}

.dikolas_muvtezin a.dumigateg:hover {
box-shadow:0 0 5px #e3e3e6;
}

.dikolas_muvtezin:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}

.dikolas_muvtezin:hover .zornet_rulpdsa {
opacity:1;
filter:alpha(opacity=100);
}

.dikolas_muvtezin:hover h2,.dikolas_muvtezin:hover a.dumigateg {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translatey(0);
-webkit-transform:translatey(0);
transform:translatey(0);
}

.dikolas_muvtezin:hover a.dumigateg {
-webkit-transition-delay:.2s;
transition-delay:.2s;
}