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.
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>
<!DOCTYPE html>
<html>
<head>
<title>CSS Zoom Effect</title>
</head>
<body>
<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>
</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.
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>
<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.
Feel free to contact with me if face any problem and leave a comment if you like it.
No comments:
Post a Comment