Back to Guides

Tutorial: Zoom Hover Effect

With the CSS transform and transition properties we can magnify images upon hover. Give the image you want the effect to apply to an additional class e.g. class=”portfolio-image” then add the following code to your child theme’s style.css file:
.portfolio-image {
	display:block;
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-o-transform:scale(1);
	transform:scale(1);
	-webkit-transition:-webkit-transform .3s ease-in-out;
	-moz-transition:-moz-transform .3s ease-in-out;
	-ms-transition:-ms-transform .3s ease-in-out;
	-o-transition:-o-transform .3s ease-in-out;
	transition:transform .3s ease-in-out;
	-webkit-backface-visibility:hidden;
	border-bottom: none;
}

.portfolio-image:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}
Now when you hover over the images they zoom. buttons-about buttons-contact buttons-projects Back to the Top