<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<body>
<main>
<h1>Thumbnail with Animated Captions</h1>
<section id="container">
<div class="thumbnail"
data-title="Title"
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://www.topsante.com/var/topsante/storage/images/medecine/maux-de-tete/mal-de-tete/prevenir/sexe-les-maux-de-tete-lies-a-l-orgasme-ca-existe-23687/165874-3-fre-FR/Sexe-les-maux-de-tete-lies-a-l-orgasme-ca-existe.jpg" alt="Illustration of Vulture" width="300">
</div>
</section>
</main>
</body>
</html>
/* 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;
text-align: center;
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);
}
