Skip to content

Instantly share code, notes, and snippets.

@leemark
Last active December 15, 2015 11:19
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 leemark/5251813 to your computer and use it in GitHub Desktop.
Save leemark/5251813 to your computer and use it in GitHub Desktop.
Zoom on hover
div{
margin: 45px;
/** prevent screen flash on child element :hover state transform **/
-webkit-transform: translate3D(0, 0, 0)
}
img {
/** basic styles **/
max-width: 200px;
margin: 1px;
border: 1px solid #333;
cursor: pointer;
/** set up transition **/
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
img:hover {
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-o-transform: scale(1.4);
-ms-transform: scale(1.4);
transform: scale(1.4);
box-shadow: 2px 2px 6px #333;
}
<div>
<img src="http://distilleryimage6.s3.amazonaws.com/e90d9d6a758e11e2979f22000a1f8ae3_7.jpg" />
<img src="http://distilleryimage1.s3.amazonaws.com/ca26696a885611e2b74e22000a9e07d7_7.jpg" />
<img src="http://distilleryimage1.s3.amazonaws.com/5515bbe08c0b11e2855722000aa800e1_7.jpg" />
<img src="http://distilleryimage0.s3.amazonaws.com/b6778d5a306211e2bf5922000a1f8cdc_7.jpg" />
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment