Skip to content

Instantly share code, notes, and snippets.

@dennisschipper

dennisschipper/index.html

Created October 21, 2011 17:03
Show Gist options
  • Save dennisschipper/1304331 to your computer and use it in GitHub Desktop.
Save dennisschipper/1304331 to your computer and use it in GitHub Desktop.
Download ZIP
Mouseover effect with css transitions
Raw
index.html
<!doctype html>
<head>
<title></title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box_to_transform">
<a href="#">
<img src="http://www.designfordetails.com/blog/img/photoshop_logo.png">
</a>
</div>
</body>
</html>
Raw
styles.css
BODY {
background: #242424;
font-family: helvetica, verdana, sans-serif;
font-size: 1em;
color: #202020;
line-height: 2em;
padding: 200px;
}
.box_to_transform {
width: 200px; /** you don't need a set width, only height **/
height: 200px;
border: 3px solid #ffffff;
display: block;
border-radius: 4px;
background: url('http://www.designfordetails.com/blog/img/hover_effect_bg.png') center top;
}
.box_to_transform a img {
display: block;
-moz-transform: scale(0.3); /** resize our image as soon as it loads **/
-webkit-transform: scale(0.3);
-ms-transform: scale(0.3);
-o-transform: scale(0.3);
transform: scale(0.3);
-moz-transition: all .3s ease-in-out .3s; /** the transition **/
-webkit-transition: all .3s ease-in-out .3s;
-ms-transition: all .3s ease-in-out .3s;
-o-transition: all .3s ease-in-out .3s;
transition: all .3s ease-in-out .3s;
}
.box_to_transform a:hover img{ /** and the resize **/
-moz-transform: scale(0.75);
-webkit-transform: scale(0.75);
-ms-transform: scale(0.75);
-o-transform: scale(0.75);
transform: scale(0.75);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment