Skip to content

Instantly share code, notes, and snippets.

Created August 31, 2016 01:02
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save rlugojr/4415b321dffbee3c1e61f519f2a8d1ec to your computer and use it in GitHub Desktop.
Thumbnail with Animated Captions
<section id="container">
<div class="thumbnail"
data-description="Bacon ipsum dolor amet filet mignon alcatra short ribs, sausage shoulder tail biltong rump chicken ground round ham hock porchetta tri-tip. Boudin bresaola andouille, leberkas pork ball tip turducken beef ribs">
<img src="" alt="Meat" width="300">
*, *:after, *:before {
box-sizing: border-box;
html {
height: 100%;
font-size: 62.5%;
body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: Lato, sans-serif;
font-size: 1.8rem;
background: radial-gradient(ellipse at center, #f5f5f5 0%,#ddd 100%);
user-select: none;
h1 {
font-family: Merriweather, serif;
margin: 0 0 50px;
cursor: default;
#container {
width: 300px;
margin: 0 auto;
.thumbnail {
-webkit-backface-visibility: hidden;
display: inline-block;
position: relative;
margin: 0 auto;
overflow: hidden;
background: #000;
box-shadow: 0 15px 50px rgba(0,0,0,.5);
.thumbnail img {
display: block;
max-width: 100%;
transition: opacity .2s ease-in-out;
.thumbnail:hover img {
opacity: .5;
.thumbnail::before {
position: absolute;
z-index: 1;
width: 100%;
height: 50%;
transition: transform .4s ease-out;
color: #fff;
.thumbnail::after {
content: attr(data-title);
top: 0;
padding-top: 55px;
transform: translateY(-100%) scale(.8);
background: rgba(0,0,0,.4);
font-size: 3.5rem;
font-weight: 300;
font-family: Merriweather, serif;
text-align: center;
.thumbnail::before {
content: attr(data-description) "…";
top: 50%;
padding: 20px;
transform: translateY(100%) scale(.8);
background: rgba(107,38,68,.6);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
color: #f1f1f1;
font-size: 1.5rem;
.thumbnail:hover::before {
transform: translateY(0%) scale(1);
<link href=",700" rel="stylesheet" />
<link href="" rel="stylesheet" />

Thumbnail with Animated Captions

In combination with data attributes, you can build a thumbnail image with title and description using just one single line of HTML code.

A Pen by SitePoint on CodePen.


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment