figure.effect-bubba {
background: #000
}
figure.effect-bubba img {
opacity: .7;
-webkit-transition: opacity .35s;
transition: opacity .35s
}
figure.effect-bubba:hover img {
opacity: .4
}
figure.effect-bubba figcaption::after,
figure.effect-bubba figcaption::before {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
content: '';
opacity: 0;
-webkit-transition: opacity .35s, -webkit-transform .35s;
transition: opacity .35s, transform .35s
}
figure.effect-bubba figcaption::before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0, 1);
-ms-transform: scale(0, 1);
transform: scale(0, 1)
}
figure.effect-bubba figcaption::after {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1, 0);
-ms-transform: scale(1, 0);
transform: scale(1, 0)
}
figure.effect-bubba h2 {
padding-top: 25%;
-webkit-transition: -webkit-transform .35s;
transition: transform .35s;
-webkit-transform: translate3d(0, -20px, 0);
-ms-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0)
}
figure.effect-bubba .effect-description {
padding: 20px 2.5em;
opacity: 0;
-webkit-transition: opacity .35s, -webkit-transform .35s;
transition: opacity .35s, transform .35s;
-webkit-transform: translate3d(0, 20px, 0);
-ms-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0)
}
figure.effect-bubba:hover figcaption::after,
figure.effect-bubba:hover figcaption::before {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
figure.effect-bubba:hover h2,
figure.effect-bubba:hover .effect-description {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}