Image Zoom Hover Effect
Animations are good and it make website's pages attractive and more live. It feel user to see live things. Here you can user videos etc or gif image, But the problem is after using videos or gif file your website's page will heavy and load slow. These heavy file will consume your hosting spaces and also consume user's data and bandwidth.
So in this case we can use animations to make some zoom-in and zoom-out effect to JPG and PNG file. Using this we can save data and bandwidth. We will do it with simple CSS. Here we are not using any JavaScript, which can make it complex. below are 2 images. 1st one is normal image, and when your mouse hover then it will zoom. see 2nd image.
Here is the below code action for image zoom-in zoom-out:
Here is the below code for image zoom-in zoom-out:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Zoom Hover Effect</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
section {
text-align: center;
}
.image-container {
position: relative;
overflow: hidden;
display: inline-block;
width: 100%;
max-width: 500px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);}
.image-container img {
display: block;
border: none;
margin: 0;
padding: 0;
width: 100%;
height: auto;
transform: scale(1.1); /* Default size */ /* IMPORTANT PART */
transition: transform 9.5s ease-in-out; /* Smooth transition for zoom effect */
}
.image-container:hover img {
transform: scale(2); /* Zoom in */ /* IMPORTANT PART */
}
</style>
</head>
<body>
<!-- Container for the Zoom Effect -->
<section>
<h2>Image Zoom Hover Effect</h2>
<div class="image-container">
<img src="1.jpg" alt="Zoom Effect Image">
</div>
</section>
</body>
</html>
Posts
0 comments:
Post a Comment