figure.effect-ming {
background: #030c17
}
figure.effect-ming img {
opacity: .9;
-webkit-transition: opacity .35s;
transition: opacity .35s
}
figure.effect-ming figcaption::before {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
border: 2px solid #fff;
-webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, .2);
box-shadow: 0 0 0 30px rgba(255, 255, 255, .2);
content: '';
opacity: 0;
-webkit-transition: opacity .35s, -webkit-transform .35s;
transition: opacity .35s, transform .35s;
-webkit-transform: scale3d(1.4, 1.4, 1);
-ms-transform: scale3d(1.4, 1.4, 1);
transform: scale3d(1.4, 1.4, 1)
}
figure.effect-ming h2 {
margin: 20% 0 10px;
-webkit-transition: -webkit-transform .35s;
transition: transform .35s
}
figure.effect-ming .effect-description {
padding: 1em;
opacity: 0;
font-size: 14px;
-webkit-transition: opacity .35s, -webkit-transform .35s;
transition: opacity .35s, transform .35s;
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5)
}
figure.effect-ming:hover h2 {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9)
}
figure.effect-ming:hover figcaption::before,
figure.effect-ming:hover .effect-description {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
figure.effect-ming:hover figcaption {
background-color: rgba(58, 52, 42, 0)
}
figure.effect-ming:hover img {
opacity: .4
}