Skip to content

Instantly share code, notes, and snippets.

@rlugojr

rlugojr/index.html

Created August 31, 2016 01:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rlugojr/4415b321dffbee3c1e61f519f2a8d1ec to your computer and use it in GitHub Desktop.
Save rlugojr/4415b321dffbee3c1e61f519f2a8d1ec to your computer and use it in GitHub Desktop.
Download ZIP
Thumbnail with Animated Captions
Raw
index.html
<html>
<body>
<main>
<section id="container">
<div class="thumbnail"
data-title="Bacon"
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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/meat.jpg" alt="Meat" width="300">
</div>
</section>
</main>
</body>
</html>
Raw
style.css
/* DEMO STYLING */
*, *: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::after,
.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::after,
.thumbnail:hover::before {
transform: translateY(0%) scale(1);
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Merriweather:300,700" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Lato:400" rel="stylesheet" />
Raw
thumbnail-with-animated-captions.markdown

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.

License.

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