Mask Div on Hover

Front is just an image and on hover it shows a new div with text in it

by bspveiga

HTML

<div class="view">
    <img src="http://upload.wikimedia.org/wikipedia/en/4/4e/Shibe_Inu_Doge_meme.jpg">
    <div class="mask"> <span class="tile-title">Doge</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan pellentesque semper. Cras pellentesque nunc in venenatis eleifend. Mauris ac ante felis. Sed placerat eu lacus viverra elementum. Suspendisse turpis lorem, sodales eu malesuada vitae, scelerisque a nunc. Donec vitae sollicitudin urna. Praesent quis dignissim nisl. Nunc euismod ipsum vitae augue molestie vestibulum. Praesent facilisis tempor risus, in bibendum nisl scelerisque in. Quisque et cursus arcu.</p>
    </div>
</div>

CSS

/* Front CSS */
 .view {
    width: 400px;
    height: 300px;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
    -webkit-transition: width 1s ease, height 1s ease;
}
.view img {
    width: 100%;
    position: relative;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
}
.view span {
    transform: translateY(-100px);
    -webkit-transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}
.view .mask {
    opacity: 0;
    background-color: tan;
    padding: 10px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    height: 306px;
}
.tile-title {
    font-size: 1.5em;
    margin: 0 0 10px;
    font-weight: 700;
}
/* Hover CSS */
 .view:hover img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
}
.view:hover .mask {
    opacity: .9;
}
.view:hover span, .view:hover p, .view:hover a.info {
    opacity: 1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
}
.view:hover p {
    transition-delay: 0.1s;
    -webkit-transition-delay: 0.1s;
}
.view:hover a.info {
    transition-delay: 0.2s;
    -webkit-transition-delay: 0.2s;
}