.grid figure{
    position:relative;
    z-index:1;
    display:inline-block;
    overflow:hidden;
    width:100%;
    height:350px;
    cursor:pointer
}
@media screen and (max-width: 1024px) {
    .grid figure{
        height:270px;
    }
}
@media screen and (max-width: 320px) {
    /* iphone5 */
    .grid figure{
        height:240px;
    }
}
.effect-bubba{
    background:#f48201;
    display:table;
}
.effect-bubba img{
    opacity:1;
    -webkit-transition:opacity .35s;
    transition:opacity .35s
    display:table-cell;
    vertical-align:middle;
}
.effect-bubba:hover img{
    opacity:.4
}
.effect-bubba figcaption a{
    display: -webkit-box;       /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;          /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;       /* TWEENER - IE 10 */
    display: -webkit-flex;      /* NEW - Chrome */
    display: flex;   
    justify-content: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    color:#fff;
    position:absolute;
    font-size:1.8em;
    left: 0;
    top: 0;
    text-align:center;
    width: 100%;
    height: 100%;
}
.effect-bubba figcaption::before,
.effect-bubba figcaption::after{
    position:absolute;
    top:30px;
    right:30px;
    bottom:30px;
    left:30px;
    content:'';
    opacity:0;
    -webkit-transition:opacity 0.35s,-webkit-transform .6s;
    transition:opacity 0.35s,transform .6s
}
.effect-bubba figcaption::before{
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
    -webkit-transform:scale(0,1);
    transform:scale(0,)}
.effect-bubba figcaption::after{
    border-right:1px solid #fff;
    border-left:1px solid #fff;
    -webkit-transform:scale(1,0);
    transform:scale(1,0)
}
.effect-bubba:hover figcaption::before,
.effect-bubba:hover figcaption::after{
    opacity:1;-webkit-transform:scale(1);transform:scale(1)
}
.effect-bubba:hover figcaption a{
    z-index:9
}
.effect-bubba:hover p{
    opacity:0;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,40px,0)
}
.effect-bubba p{
    padding:20px 2.5em;
    opacity:1;
    -webkit-transition:opacity 0.35s,-webkit-transform .35s;
    transition:opacity 0.35s,transform .35s;
    -webkit-transform:translate3d(0,20px,0);
    transform:translate3d(0,20px,0)
}