Thumbnail Overlay

w/Animations

by js_test

HTML

<figure>
    <img src="http://placehold.it/360x360" />
    <figcaption>
        <div class="details">
            <span class="title">
                <span class="category">Category</span>
                Title
            </span>
        </div>
        <div class="overlay"></div>
    </figcaption>
</figure>

CSS

html, body, figure {
    font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
    margin: 0;
    padding: 0;
}
figure {
    display: block;
    position: relative;
    height: 360px;
    max-height: 100%;
    width: 360px;
    max-width: 100%;
    overflow: hidden;
}
figcaption, figure > img, figcaption > .details, figcaption > .overlay {
    position: absolute;
}
figure > img {
    max-width: 100%;
    height: auto;
    z-index: 10;
    -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    -ms-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
figure:hover img {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-filter: blur(3px);
    -moz-filter: blur(32x);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
}
figcaption, figcaption > .details, figcaption > .overlay {
    height: 100%;
    width: 100%;
}
figcaption {
    z-index: 20;
    text-align: center;
}
figcaption > .details, figcaption > .overlay {
    opacity: 0;
    /* -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    -o-transition: -o-transform 0.4s;
    transition: transform 0.4s; */
    -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    -ms-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transform: scale(1.3);
   ...