Короткий текст про опис тої чи іншої послуги, що забезпечує перевагу над конкурентами на ринку України що забезпечує перевагу над конкурентами на ринку України або закордоном.
<div class="korobka">
<div class="blokhover">
<div data-name="01"><div>
<h3>Заголовок один</h3>
<p>Короткий текст про опис тої чи іншої послуги, що забезпечує перевагу над конкурентами на ринку України або закордоном.</p>
<a href="">Детальніше</a></div>
</div>
<div data-name="02"><div>
<h3>Заголовок два</h3>
<p>Короткий текст про опис тої чи іншої послуги, що забезпечує перевагу над конкурентами на ринку України або закордоном.</p>
<a href="">Детальніше</a></div>
</div>
<div data-name="03"><div>
<h3>Заголовок три</h3>
<p>Короткий текст про опис тої чи іншої послуги, що забезпечує перевагу над конкурентами на ринку України що забезпечує перевагу над конкурентами на ринку України або закордоном.</p>
<a href="">Детальніше</a></div>
</div>
</div>
</div>
<style>
.korobka {width:100%; overflow:hidden; background:#14182f; padding: 50px 0; }
.blokhover {display:flex; flex-flow: row wrap; justify-content: space-between; padding:0 2%; color:#fff;}
.blokhover > div {width:31%; position:relative; margin:1px 2% 1px 0;z-index:2;}
.blokhover > div:last-child{margin:0;}
.blokhover > div::before {content:""; width:100%; height:102%; background:linear-gradient(135deg, #5f03fd 50%, #e51d65); transform: skew(2deg,2deg); position:absolute; top:-1.1%; left:-0.5%; z-index:-2;}
.blokhover > div > div { display:flex; flex-direction: column; justify-content: center; align-items: center; padding:110px 8%; height:100%; background: linear-gradient(to right, #14182f 50%, #070b22 50%);}
.blokhover p, .blokhover h3 {position:relative;z-index:3; color:#fff;}
.blokhover h3 {font-size:1.4em;}
.blokhover > div::after {content: attr(data-name);font-size:123px; font-weight:bold; color:#343644; position: absolute;top:30%;left:33%; z-index:0; opacity:.2;}
.blokhover a {display: inline-block; text-decoration:none; color:#fff; padding:10px 20px; border:1px solid white; opacity:0; position:absolute; bottom:30%;left:35%;}
.blokhover > div:hover a {bottom:8%; opacity:1; transition:0.5s;}
.blokhover a:hover {background:#fff; color:#14182f;}
.blokhover > div:hover::after {top:4%; transition:0.5s; top:5px; opacity:.3;}
.blokhover > div:hover::before {-webkit-filter: invert(100%);filter: invert(100%); transition:0.9s;}
.blokhover > div:nth-child(2)::before {background:linear-gradient(135deg, #04bfd2, 50%, #84fe02);}
.blokhover > div:nth-child(3)::before{background:linear-gradient(135deg, #ea491b 50%, #fe0455);}
</style