Skip to content

Instantly share code, notes, and snippets.

@gunnarbittersmann
Last active June 5, 2016 13:42
Show Gist options
  • Save gunnarbittersmann/e1c363fdb1212f7a5aa7c7e62c349bd3 to your computer and use it in GitHub Desktop.
Save gunnarbittersmann/e1c363fdb1212f7a5aa7c7e62c349bd3 to your computer and use it in GitHub Desktop.
figure caption appears
/**
* figure caption appears
* deprecates http://dabblet.com/gist/a1f68516180ac97962b4
*/
*
{
box-sizing: border-box;
}
html
{
background: hsl(30, 60%, 90%);
}
figure
{
display: inline-block;
position: relative;
width: 24em;
overflow: hidden;
}
img
{
display: block;
width: 100%;
}
figcaption
{
position: absolute;
top: 100%;
left: 0;
right: 0;
padding: 0.5em 1em;
background: hsla(30, 60%, 90%, 0.8);
transition: transform 0.2s ease-in-out 0s;
}
figure:hover figcaption
{
transform: translateY(-100%);
}
figcaption span
{
font: 1.5em/1.5 Georgia;
display: block;
}
.name
{
font-weight: bold;
}
<figure>
<img src="http://upload.wikimedia.org/wikipedia/commons/3/38/Leonardo_da_Vinci_-_presumed_self-portrait_-_WGA12798.jpg" alt=""/>
<figcaption>
<span class="name">Leonardo da Vinci</span>
<span class="title">Künstler und Wissenschaftler</span>
</figcaption>
</figure>
// alert('Hello world!');
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment