Sunday, December 14, 2014

CSS zoom effect on images of a website

We will create a simple webpage consisting of an image, a message and a title only. Basically we will use some CSS codes to create mouseover zoom effect of images.
CSS tutorial,Image Zooming Effect,CSS Zoom Effect

 Step 01  First of all create a simple webpage
We need a website to apply the zoom effect. That's why you need to create webpage, but you may apply on your existing website if you have. However, use the following codes given below and create a simple webpage using notepad.

<!DOCTYPE html>
<html> 
   <head>
      <title>CSS Zoom Effect</title>
   </head> 
   <body>
      <img src="name.jpg" width="300px" height="180px"/>      <h1>Hover the mouse on the image</h1>
   </body> 
</html>

The above codes will create a simple webpage with a title, an image and a message.

Note: You have to replace name.jpg with the name of your image and keep the image in the same directory.

 Step 02  Add the CSS codes to zoom the image
Now we need to add the CSS codes given below inside the <head> and </head> tags. You may also add these CSS codes in your .css file.

<style>
img:hover {
-webkit-transform:scale(1.2);
transform:scale(1.2);
}

img {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
</style>

 Step 03  Finally save your work and get the effect
After completing all above steps, now save the webpage once again and open it with a browser. Now hover the mouse on the image, it will zoom in.

Feel free to contact with me if face any problem and leave a comment if you like it.


No comments:

Post a Comment