Skip to content

Instantly share code, notes, and snippets.

@LL782

LL782/dabblet.css

Created February 11, 2013 16:30
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 LL782/4755559 to your computer and use it in GitHub Desktop.
Save LL782/4755559 to your computer and use it in GitHub Desktop.
Download ZIP
Image Overlay for rollover (Flexible)
Raw
dabblet.css
/**
* Image Overlay for rollover (Flexible)
*/
#round-links {
height: 300px;
width: 100%;
}
#round-links a {
display: block;
float: left;
width: 20%;
height: 100%;
border-radius: 150px;
overflow: hidden;
margin: 24px;
position: relative;
}
#round-links a:after {
content: 'View Project';
color: #fff;
text-align: center;
line-height: 300px;
font-family: Arial;
font-weight: bold;
font-size: 2em;
display: block;
background-color: #00adef;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.5s;
}
#round-links a:hover:after {
opacity: 1;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="round-links">
<a href="http://monkeyzbox.com" target="_blank"><img src="http://farm4.staticflickr.com/3563/5754388259_628c55a1ea.jpg" /></a>
<a href="http://monkeyzbox.com" target="_blank"><img src="http://farm4.staticflickr.com/3548/5754388123_c7ee0c44bf.jpg" /></a>
<a href="http://monkeyzbox.com" target="_blank"><img src="http://farm4.staticflickr.com/3303/5754933814_0d1051b118.jpg" /></a>
</div><!-- round-links -->
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment