BACKGROUND IMAGE ZOOM WITH TRANSITION

Date: 19/06/2019

INTRODUCTION

In this tutorial, I going to explain about zoom the background image with the transition property

For that i have use transition property for zoom the image.

The following code will used to zoom the particular image.

<style type="text/css">
	.image-box{
  width:300px;
  overflow:hidden;
}
.image {
	width:300px;
  height:200px;
	background: url("http://a1128.g.akamai.net/7/1128/497/0001/origin-d5.scene7.com/is/image/ProvideCommerce/green%20flower%201_blog131210");
	background-position:center;
 
} 
.image:hover {  
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2); 
  transform: scale(1.2);
} 
</style>


<center>
  
</div></center>

The above code i have use image class to aligning the image size.

Image hover for zoom the image.

INPUT IMAGE:

The image will appear like following before add the transition.

OUTPUT IMAGE:

The image will appear like following after the zooming.

Thanks for using pheonix solutions.

You find this tutorial helpful? Share with your friends to keep it alive.

Post Views: 29