.clearfix {
    clear: both;
}

.teaser {
    position: relative;
}

.teaser a {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display: block;
    z-index: 400;
}

.teaser .overlay {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    -webkit-transition: background 0.5s ease;
    -moz-transition: background 0.5s ease;
    -ms-transition: background 0.5s ease;
    -o-transition: background 0.5s ease;
    transition: background 0.5s ease;
}

.teaser .overlay h4 {
    z-index:300;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;

}

.teaser .overlay .inner {
    opacity: 0;
    padding: 0 40px;
    color: #fff;
    -webkit-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    -ms-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;

}

.teaser .overlay .inner p {
    color: #fff;
}

@media screen and (min-width: 992px) {

    .teaser:hover .overlay {
        background: rgba(0,0,0,0.5);
    }

    .teaser:hover .overlay .inner {
        opacity: 1;
    }

}