CSS3 Image Scale Effect

In this tutorial, we are going to take a look at simple image scale effect with CSS3 transition and transform properties.

Quick Tip : How To Create A Simple CSS3 Heart Pulsing Animations?

HTML:

<div class="container">
	<img class="photo" src="http://coffeecupweb.com/wp-content/uploads/2015/07/css3-scale-effect.jpg" alt="CSS3 Scale Effect" />
</div>

CSS:

.photo{
	width: 60%;
	height: auto;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.photo:hover{ 
	-webkit-transform: scale(1.3);
	-moz-transform: scale(1.3);
	transform: scale(1.3);
}

 

Leave a Comment.