Skip to content

Instantly share code, notes, and snippets.

@keithwyland

keithwyland/dabblet.css

Created March 20, 2012 18:46
Show Gist options
  • Save keithwyland/2139621 to your computer and use it in GitHub Desktop.
Save keithwyland/2139621 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 Hover Image
Raw
dabblet.css
/** CSS3 Hover Image
* The first commented line is your dabblet’s title
*/
*{transition: all 0.5s ease;}
.container {
float: left;
border: 1px solid black;
width: 200px;
}
.something {
background-color: #ffe;
transition: all 0.5s ease;
width: 100%;
}
.nextthing {
float: left;
width: 60%;
}
.nextthing h1, .nextthing p {
float: left;
clear: both;
}
.something img {
width: 100%;
position: relative;
}
.something:hover {
width: 400px;
background-color: #eef;
z-index: 9999;
position: absolute;
right: 0;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="nextthing">
<h1>Stuff</h1>
<p>Some other text here Some other text here Some other text here Some other text here Some other text here Some other text here Some other text here Some other text here Some other text here Some other text here Some other text here Some other text here Some other text here Some other text here Some other text here Some other text here Some other text here Some other text here Some other text here Some other text here </p>
</div>
<div class="container">
<div class="something">
<h2>Some thing</h2>
<img src="http://placekitten.com/300/239">
</div>
</div>
Raw
settings.json
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment