Skew effect

[AnWu]

https://forum.antichat.xyz/attachments/27444513/

CSS:






@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
body
{
margin
:
0
;
padding
:
0
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
min-height
:
100vh
;
background
:
#060c21
;
font-family
:
'Poppins'
,
sans-serif
;
}
.container
{
position
:
relative
;
width
:
90%
;
display
:
grid
;
grid-template-columns
:
repeat
(
auto-fill
,
minmax
(
260px
,
1fr
)
)
;
grid-template-rows
:
auto
;
grid-gap
:
0 40px
;
}
.container .box
{
margin-bottom
:
20px
;
position
:
relative
;
height
:
400px
;
background
:
#060c21
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
border
:
1px solid #000
;
}
.container .box:before
{
content
:
''
;
position
:
absolute
;
top
:
-2px
;
left
:
-2px
;
right
:
-2px
;
bottom
:
-2px
;
background
:
#fff
;
transform
:
skew
(
2deg
,
2deg
)
;
z-index
:
-1
;
}
.container .box:hover:before
{
transform
:
skew
(
2deg
,
2deg
)
;
filter
:
blur
(
20px
)
;
transition
:
0.5s
;
z-index
:
-2
;
}
.glass
{
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
50%
;
height
:
100%
;
background
:
rgba
(
255
,
255
,
255
,
.05
)
;
}
.container .box:nth-child(1):before
{
background
:
linear-gradient
(
315deg
,
#ff0057
,
#e64a19
)
;
}
.container .box:nth-child(2):before
{
background
:
linear-gradient
(
315deg
,
#89ff00
,
#00bcd4
)
;
}
.container .box:nth-child(3):before
{
background
:
linear-gradient
(
315deg
,
#e91e63
,
#5d02ff
)
;
}
.container .box:nth-child(4):before
{
background
:
linear-gradient
(
315deg
,
#ff0000
,
#ffc107
)
;
}
.container .box:nth-child(5):before
{
background
:
linear-gradient
(
315deg
,
#00ccff
,
#ff07de
)
;
}
.container .box:nth-child(6):before
{
background
:
linear-gradient
(
315deg
,
#d0e60b
,
#07ff13
)
;
}
.container .box-line
{
content
:
''
;
position
:
absolute
;
top
:
-40px
;
left
:
0
;
width
:
40%
;
height
:
100%
;
background
:
rgba
(
255
,
255
,
255
,
.05
)
;
}
.content
{
position
:
relative
;
padding
:
20px
;
transform
:
translateY
(
40px
)
;
}
.box .content h2
{
position
:
absolute
;
top
:
-60px
;
right
:
20px
;
margin
:
0
;
padding
:
0
;
font-size
:
10em
;
color
:
rgba
(
255
,
255
,
255
,
.05
)
;
transition
:
0.5s
;
}
.box:hover .content h2
{
top
:
-140px
;
}
.box .content h3
{
margin
:
0 0 10px
;
padding
:
0
;
font-size
:
24px
;
font-weight
:
500
;
color
:
#fff
;
}
.box .content p
{
margin
:
0
;
padding
:
0
;
color
:
#fff
;
font-size
:
16px
;
}
.box .content a
{
position
:
relative
;
margin
:
20px 0 0
;
padding
:
10px 20px
;
text-decoration
:
none
;
border
:
1px solid #fff
;
display
:
inline-block
;
color
:
#fff
;
transition
:
0.5s
;
transform
:
translateY
(
-40px
)
;
opacity
:
0
;
visibility
:
hidden
;
}
.box:hover .content a
{
transform
:
translateY
(
0
)
;
opacity
:
1
;
visibility
:
visible
;
}
.box .content a:hover
{
color
:
#000
;
background
:
#fff
;
}




HTML:







MoonLoader

01

Service One

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor nam fugit vitae? Saepe sed voluptatibus inventore dignissimos aliquid

Read More

02

Service Two

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor nam fugit vitae? Saepe sed voluptatibus inventore dignissimos aliquid

Read More

03

Service Three

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor nam fugit vitae? Saepe sed voluptatibus inventore dignissimos aliquid

Read More

04

Service Four

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor nam fugit vitae? Saepe sed voluptatibus inventore dignissimos aliquid

Read More

05

Service Five

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor nam fugit vitae? Saepe sed voluptatibus inventore dignissimos aliquid

Read More





ссылку на видос давать не буду

UPD: Исправил баг с наведением на ссылку. Добавил блюр при наведении :)