.grid {overflow: hidden;}

/* Common style */
.grid figure {position: relative;z-index: 1;display:inline-block;overflow:hidden;cursor: pointer;}
.grid figure img {position:relative;}
.grid figure figcaption {color:#fff;}
.grid figure figcaption::before,.grid figure figcaption::after {pointer-events: none;}

.grid figure figcaption,.grid figure a {position:absolute;top:0;height:100%; text-align:center;}

/***** Bubba *****/
figure.effect-bubba img {-webkit-transition: opacity 0.35s;transition: opacity 0.35s;}
figure.effect-bubba:hover {background:#e86129;}
figure.effect-bubba:hover img {opacity:0;}

figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after {position: absolute;top:5px;right:5px;bottom:5px;left:5px;content: '';opacity: 0;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;}

figure.effect-bubba figcaption::before {border-top: 1px solid #fff;border-bottom: 1px solid #fff;-webkit-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);transform: scale(1,0);}

figure.effect-bubba figcaption a{ margin:45% 0 0 30%;display:block; color:#fff;opacity:0;-webkit-transition:opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: translate3d(0,20px,0);transform: translate3d(0,20px,0);text-align: center; text-transform:uppercase; width:80px; height:26px; line-height:24px; border:solid 1px #fff;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;-o-transition:all .3s linear;-ms-transition:all .3s linear;transition:all .3s linear;}
figure.effect-bubba figcaption a span{ display:inline-block; width:23px; height:5px; float:right; margin:9px 6px 0 0;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;-o-transition:all .3s linear;-ms-transition:all .3s linear;transition:all .3s linear;}
figure.effect-bubba:hover figcaption a{ width:100px;margin:45% 0 0 25%;}
figure.effect-bubba:hover figcaption a span{ margin:9px 15px 0 0;}
figure.effect-bubba p {padding:15% 15px;opacity:0;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: translate3d(0,20px,0);transform: translate3d(0,20px,0);text-align:center; text-transform:capitalize; font-size:14px;}

figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {opacity:1;-webkit-transform: scale(1);transform: scale(1);}

figure.effect-bubba:hover figcaption a,
figure.effect-bubba:hover p {opacity: 1;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
figure.effect-bubba:hover .grid figure a{opacity:1; text-indent:0;}