.box{
overflow
:
hidden
;
position
:
relative
;
}
.box:before{
content
:
""
;
width
:
100%
;
height
:
100%
;
border-radius:
50%
;
border
:
1px
solid
rgba(
0
,
0
,
0
,
0.5
);
position
:
absolute
;
top
:
50%
;
left
:
50%
;
opacity:
0
;
transform: translate(
-50%
,
-50%
) rotate(
0
);
transition:
all
0.3
s ease
0
s;
}
.box:hover:before{
border
:
500px
solid
rgba(
0
,
0
,
0
,
0.5
);
opacity:
1
;
transform: translate(
-50%
,
-50%
) rotate(
360
deg);
}
.box img{
width
:
100%
;
height
:
auto
;
}
.box .box-content{
width
:
100%
;
text-align
:
center
;
position
:
absolute
;
top
:
50%
;
left
:
0
;
opacity:
0
;
transform: translateY(
-50%
) scale(
2
);
transition:
all
0.2
s ease
0
s;
}
.box:hover .box-content{
opacity:
1
;
transform: translateY(
-50%
) scale(
1
);
}
.box .box-
content
:after{
content
:
""
;
width
:
200px
;
height
:
200px
;
background
: rgba(
93
,
53
,
176
,
0.9
);
position
:
absolute
;
top
:
50%
;
left
:
50%
;
z-index
:
-1
;
transform: translate(
-50%
,
-50%
);
-webkit-clip-path: polygon(
50%
0%
,
83%
12%
,
100%
43%
,
94%
78%
,
68%
100%
,
32%
100%
,
6%
78%
,
0%
43%
,
17%
12%
);
clip-path: polygon(
50%
0%
,
83%
12%
,
100%
43%
,
94%
78%
,
68%
100%
,
32%
100%
,
6%
78%
,
0%
43%
,
17%
12%
);
}
.box .title{
font-size
:
20px
;
font-weight
:
600
;
color
:
#fff
;
text-transform
:
capitalize
;
margin
:
0
0
5px
0
;
}
.box .post{
display
:
block
;
font-size
:
13px
;
color
:
#fff
;
text-transform
:
capitalize
;
letter-spacing
:
1px
;
text-shadow
:
1px
1px
0
rgba(
0
,
0
,
0
,
0.5
);
margin-bottom
:
10px
;
}
.box .
icon
{
padding
:
0
;
margin
:
0
;
list-style
:
none
;
}
.box .
icon
li{
display
: inline-
block
;
margin-left
:
5px
;
}
.box .
icon
li a{
display
:
block
;
width
:
35px
;
height
:
35px
;
line-height
:
33px
;
border-radius:
40%
0
;
border
:
2px
solid
#fff
;
font-size
:
17px
;
color
:
#fff
;
transition:
all
0.3
s ease
0
s;
}
.box .
icon
li a:hover{
background
:
#fff
;
color
:
rgb
(
93
,
53
,
176
);
}
@media only
screen
and (
max-width
:
990px
){
.box{
margin-bottom
:
30px
; }
}