JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<body>
<header>
	<div class="zorsadtun_gukin"><a href="http://zornet.ru"><img src="http://zornet.ru/Aben/ABGDA/zornet_ru/games-zornet.jpg" alt="Анимация при наведении">
		<div class="kasnulergun">
			<h3>Эффект сайта zornet.ru на CSS3</h3>
			<p>Все здесь работает при помощи CSS3, что оригинально и красиво смотрится.</p>
		</div>
	</a></div>
</header>
</body>

CSS

body{
 background-image: url("http://zornet.ru/Aben/ABGDA/zornet_ru/ep_naturalwhite.png");
 font-family: Verdana;
 color: #fff;
 text-align: center;
}



.zorsadtun_gukin {
    width: 375px;
    margin: 63px auto;
    position: relative;
    border: solid 5px rgba(236, 230, 230, 0.8);
    background: linear-gradient(19deg, #e43828, #1a1af1);
    overflow: hidden;
}
.zorsadtun_gukin a {
    display: block;
    color: #f7f0f0;
    text-decoration: none;
}
.zorsadtun_gukin a img{
 width: 100%;
}
.kasnulergun {
    position: absolute;
    top: 0;
    left: 0;
    padding: 38px 19px;
    opacity: 0;
    z-index: 100;
    transition: .5s cubic-bezier(0.25, 0.1, 0.14, 0.92);
}
.kasnulergun h3{
 font-size: 25px;
}
.kasnulergun p{
 font-size: 14px;
}
.zorsadtun_gukin a:before,
.zorsadtun_gukin a:after{
 content: '';
 position: absolute;
 width: 199%;
 height: 199%;
 transition: .5s ease-in-out;
 mix-blend-mode: darken;
}
.zorsadtun_gukin a:before{
 right: 0;
 bottom: -100%;
 background: rgba(230, 12, 50, 0.8);
 transform: skew(-45deg) translateX(100%);
}
.zorsadtun_gukin a:after{
 left: 0;
 top: -100%;
 background: rgba(11, 72, 174, 0.8);
 transform: skew(145deg) translateX(-100%);
}
.zorsadtun_gukin:hover a:before{
 transform: skew(-39deg) translateX(0%);
}
.zorsadtun_gukin:hover a:after{
 transform: skew(145deg) translateX(0%);
}
.zorsadtun_gukin:hover .kasnulergun{
 opacity: 1;
}