Image Zoom Hover Effect
<!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>
/* General Styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
/* Section Styling */
section {
text-align: center;
}
/* Container for the Zoom Effect */
.image-container {
position: relative;
overflow: hidden; /* Prevents overflow outside the container */
display: inline-block;
width: 100%;
max-width: 500px; /* Adjust container width */
border-radius: 10px; /* Optional: rounded corners */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Optional shadow */
}
/* Image Styling */
.image-container img {
display: block;
border: none; /* Removes any border */
margin: 0; /* Removes any margin */
padding: 0; /* Removes any padding */
width: 100%;
height: auto;
transform: scale(1.1); /* Default size */ /* IMPORTANT PART */
transition: transform 9.5s ease-in-out; /* Smooth transition for zoom effect */
}
/* Zoom Effect on Hover */
.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