?
áEÓê¤ÎïLwebshll2019
.latest-post,
.blog-masonry,
.blog-list {
background-color: #f1f1f1;
.post {
position: relative;
background-color: #fff;
margin-top: 30px;
overflow: hidden;
&:hover {
.post-media {
.post-meta {
ul {
li {
opacity: 1;
@include translateX(0);
&:nth-child(1) {
@include transition-delay(0s);
}
&:nth-child(2) {
@include transition-delay(.1s);
}
&:nth-child(3) {
@include transition-delay(.2s);
}
&:nth-child(4) {
@include transition-delay(.3s);
}
}
}
~ div {
&:after {
opacity: 1;
visibility: visible;
@include transition-delay(0s);
}
}
}
}
}
}
.post-inner {
padding: 22px;
.post-meta {
margin-top: -8px;
margin-bottom: 10px;
ul {
margin: 0 -6px;
padding: 0;
list-style: none;
li {
position: relative;
display: inline-block;
font-family: $pd;
font-style: italic;
font-size: 12px;
margin: 5px 6px;
.icon, .fa {
display: none;
}
&:after {
content: '//';
display: block;
position: absolute;
right: -14px; top: 0;
}
&:last-child {
&:after {
display: none;
}
}
a {
color: inherit;
&:hover {
color: $color;
}
}
}
}
}
}
.post-media {
position: relative;
img {
width: 100%;
}
&:before {
content: '';
display: block;
position: absolute;
width: 0; height: 0;
border: 10px solid transparent;
border-bottom-color: #fff;
left: 74px; bottom: 0;
z-index: 99;
}
.post-meta {
position: absolute;
top: 50%; left: 16px;
@include translateY(-50%);
z-index: 9;
ul {
margin: 0;
padding: 0;
list-style: none;
li {
position: relative;
margin: 10px 0;
z-index: 9;
opacity: 0;
@include translateX(-50px);
@include transition(all .25s ease);
&:nth-child(1) {
@include transition-delay(.4s);
}
&:nth-child(2) {
@include transition-delay(.3s);
}
&:nth-child(3) {
@include transition-delay(.2s);
}
&:nth-child(4) {
@include transition-delay(.1s);
}
.icon, .fa {
width: 30px; height: 30px;
@include rounded(50%);
border: 1px solid $color;
text-align: center;
line-height: 28px;
font-size: 14px;
color: $color;
cursor: pointer;
@include transition(all .3s ease);
}
span, a {
font-size: 12px;
color: #fff;
height: 30px;
}
a:hover {
text-decoration: underline;
}
> span {
position: absolute;
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
padding: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
background-color: $color;
z-index: -1;
left: 0; top: 0;
@include rounded(30px);
white-space: nowrap;
@include transition(all .3s ease);
}
&:hover {
.icon, .fa {
color: #fff;
@include translateX(2px);
}
> span {
width: auto;
opacity: 1;
visibility: visible;
padding-left: 35px;
padding-right: 13px;
}
}
}
}
~ div {
&:after {
content: '';
position: absolute;
display: block;
width: 100%; height: 100%;
top: 0; left: 0;
background-color: rgba(255,255,255,.85);
@include transition(all .3s linear .4s);
opacity: 0;
visibility: hidden;
}
}
}
}
.post-title {
.h5 {
color: #3e3e3e;
letter-spacing: 0.05em;
}
a {
&:hover {
color: $color;
}
}
}
.post-body {
margin-top: 5px;
}
.post-footer {
margin-top: 15px;
}
}
.latest-slider {
margin-top: 20px;
.post {
margin-left: 15px;
margin-right: 15px;
}
}
.view-more-post {
margin-top: 30px;
}