.box{
text-align
:
center
;
overflow
:
hidden
;
background
: rgba(
0
,
0
,
0
,
0.2
);
position
:
relative
;
}
.box:before,
.box:after{
content
:
""
;
width
:
50%
;
height
:
100%
;
background
: repeating-linear-gradient(
50
deg, rgba(
0
,
0
,
0
,
0.2
), rgba(
0
,
0
,
0
,
0.2
)
12px
, rgba(
255
,
255
,
255
,
0.2
)
12px
, rgba(
255
,
255
,
255
,
0.2
)
21px
);
background-repeat
:
repeat
;
background-
size
:
30px
;
position
:
absolute
;
top
:
-100%
;
left
:
50%
;
z-index
:
1
;
transition:
all
0.3
s ease
0
s;
}
.box:after{
top
:
100%
;
left
:
auto
;
right
:
50%
;
}
.box:hover:before,
.box:hover:after{
top
:
0
; }
.box img{
width
:
100%
;
height
:
auto
;
transform: scale(
1.5
);
transition:
all
0.3
s ease
0
s;
}
.box:hover img{
transform:scale(
1.5
) rotate(
-20
deg);
mix-blend-mode: hard-light;
}
.box .box-content{
width
:
100%
;
height
:
100%
;
background
: rgba(
0
,
0
,
0
,
0.5
);
opacity:
0
;
position
:
absolute
;
top
:
0
;
left
:
0
;
z-index
:
2
;
transition:
all
0.2
s ease
0
s;
}
.box:hover .box-content{ opacity:
1
; }
.box .inner-content{
width
:
100%
;
padding
:
7px
0
;
position
:
absolute
;
top
:
10px
;
right
:
10px
;
text-align
:
right
;
z-index
:
2
;
transition:
all
0.3
s ease
0
s;
}
.box .title{
display
: inline-
block
;
padding
:
2px
15px
;
margin
:
0
0
3px
0
;
background
:
#fa2300
;
font-size
:
25px
;
font-weight
:
700
;
font-style
:
italic
;
color
:
#fff
;
border-radius:
20px
;
letter-spacing
:
1px
;
text-transform
:
uppercase
;
transition:
all
0.6
s ease
0
s;
}
.box .post{
display
:
block
;
padding
:
0
5px
;
font-size
:
16px
;
color
:
#fff
;
border-radius:
0
5px
5px
0
;
transition:
all
0.6
s ease
0
s;
}
.box .
icon
{
width
:
65%
;
padding
:
0
;
margin
:
0
;
list-style
:
none
;
position
:
absolute
;
top
:
50%
;
right
:
0
;
z-index
:
2
;
transition:
all
0.5
s ease
0
s;
}
.box:hover .
icon
{
right
:
50%
;
transform: translateX(
50%
);
}
.box .
icon
li{
display
: inline-
block
;
margin
:
0
5px
;
transition:
all
0.4
s cubic-bezier(
1.000
,
-0.600
,
0.570
,
-0.150
);
}
.box .
icon
li a{
display
:
block
;
width
:
40px
;
height
:
40px
;
line-height
:
40px
;
border-radius:
50%
;
background
:
#fa2300
;
margin-bottom
:
10px
;
font-size
:
20px
;
color
:
#fff
;
position
:
relative
;
transition:
all
0.3
s ease
0
s;
}
.box .
icon
li a:hover{
text-decoration
:
none
;
background
:
#fff
;
border-radius:
10%
;
box-shadow:
0
0
0
3px
#fa2300
inset
;
color
:
#fa2300
;
}
@media only
screen
and (
max-width
:
990px
){
.box{
margin-bottom
:
30px
; }
}
@media only
screen
and (
max-width
:
479px
){
.title{
font-size
:
18px
; }
}