Skip to content

Instantly share code, notes, and snippets.

@miklb

miklb/dabblet.css

Forked from michaeltwofish/dabblet.css
Created March 17, 2013 09:41
Show Gist options
  • Save miklb/5180828 to your computer and use it in GitHub Desktop.
Save miklb/5180828 to your computer and use it in GitHub Desktop.
Download ZIP
tiger in the snow (HTML5)
Raw
dabblet.css
/**
* tiger in the snow (HTML5)
*/
figure {
min-width: 178px;
/** outline: solid 1px red; /* uncomment rule to see figure outline */
position: relative;
}
img:hover {
opacity: .8;
}
img {
max-width: 100%;
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}
figcaption {
bottom: 5px;
left: 0;
right: 0;
margin: 0;
padding: 8px;
position: absolute;
background: rgba(0,0,0,.56);
color: white;
font-family: Helvetica;
font-size: 14px;
}
figcaption h4 {
margin: 0 0 8px;
padding: 0 0 5px;
border-bottom: solid 1px black;
box-shadow: 0 1px 0 0 rgba(255,255,255,.35);
font-size: 17px;
}
figcaption p {
margin: 0;
line-height: 1.25;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<figure>
<a href="#"><img src="http://tiger.information-and-facts.com/wp-content/uploads/2011/07/tiger_10.jpg"></a>
<figcaption><h4>Tiger in the snow</h4><p>The tiger is the largest wild cat and is also the largest predator on land behind the Kodiak bear and the polar bear.</figcaption>
</figure>
Raw
settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment