JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<body>
  <section>
    <div class="zornet_ru_gsamunul">
      <div class="kadrunimsab"><img src="http://zornet.ru/Aben/ABGDA/zornet_ru/lychshie-igrovue-mushki.jpg" alt="CSS эффект на zornet.ru">
        <div class="karmifsatun">
          <div class="zortesam">
            <h2>ZORNET.RU <span>при наведении</span></h2>
            <p>Здесь<br> Бедет текст<br>Для описание</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>

CSS

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

.zornet_ru_gsamunul {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.kadrunimsab {
    width: 599px;
    height: 341px;
    overflow: hidden;
    background: #151414;
    cursor: pointer;
}

.kadrunimsab img {
  width: 100%;
  transition: .5s;
}

.zornet_ru_gsamunul:hover .kadrunimsab img {
  transform: rotate(-10deg) scale(1.3);
  filter: blur(1px);
  opacity: .5;
}

.karmifsatun {
  position: absolute;
  top: 30px;
  left: 30px;
  right: 30px;
  bottom: 30px;
}

.zortesam {
  color: #fff;
  text-transform: uppercase;
  padding: 0 20px;
  opacity: 0;
  transition: .5s;
}

.zortesam h2 {
  font-size: 25px;
}

.zortesam h2 span {
  color: orange;
  padding-bottom: 3px;
  border-bottom: 2px solid #fff;
}

.zortesam p {
  position: absolute;
  top: 180px;
  width: 250px;
  border-left: 4px solid #ffb611;
  padding: 0 10px;
}

.zornet_ru_gsamunul:hover .zortesam {
  opacity: 1;
}

.karmifsatun::before,
.karmifsatun::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: .5s;
}

.karmifsatun::before {
    border-top: 1px solid #f9f3f3;
    border-bottom: 1px solid #f3efef;
    transform: scale(0, 1);
}

.karmifsatun::after {
    border-left: 1px solid #fdf6f6;
    border-right: 1px solid #fbfafa;
    transform: scale(1, 0);
}

.zornet_ru_gsamunul:hover .karmifsatun::before,
.zornet_ru_gsamunul:hover .karmifsatun::after {
  transform: scale(1, 1);
}