使用css製作滑鼠經過圖片時，放大圖片1.5倍

王铁柱6發表於2024-12-10
CSS
<!DOCTYPE html>
<html>
<head>
<title>Image Hover Zoom</title>
<style>
.container {
  width: 200px; /* Adjust as needed */
  height: 200px; /* Adjust as needed */
  overflow: hidden; /* Hide overflowing zoomed image */
}

.container img {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease; /* Smooth zoom transition */
}

.container:hover img {
  transform: scale(1.5); /* Zoom on hover */
}
</style>
</head>
<body>

<div class="container">
  <img src="your-image.jpg" alt="Your Image">
</div>

</body>
</html>

Explanation:

  1. container class:

    • Sets a fixed width and height for the container. This is important to control the area the image occupies and prevent it from overflowing when zoomed.
    • overflow: hidden; This crucial property clips any part of the image that extends beyond the container's boundaries after scaling, creating the zoom effect.

  2. container img:

    • width: 100%; and height: 100%; ensure the image fills the container completely.
    • transition: transform 0.3s ease; This adds a smooth transition effect to the transform property, making the zoom animation gradual and visually appealing. You can adjust the duration (0.3s) and the easing function (ease) as desired.

  3. container:hover img:

    • transform: scale(1.5); This is the core of the zoom effect. When the mouse hovers over the container, the image inside is scaled up by a factor of 1.5. Change this value to control the zoom level.

How to use:

  1. Replace your-image.jpg: Change this to the actual path of your image file.
  2. Adjust container size: Modify the width and height properties of the .container class to fit your image's original dimensions or your desired display size.
  3. Customize transition: Experiment with the transition property's duration and easing function to fine-tune the animation. Other easing functions include ease-in, ease-out, ease-in-out, linear, etc.
  4. Control zoom level: Change the scale() value to adjust the magnification. For example, scale(2) will double the image size, while scale(1.2) will provide a more subtle zoom.

This improved explanation provides a more detailed breakdown of the CSS and how each part contributes to the zoom effect, making it easier for someone to understand and adapt the code. It also includes instructions on how to use and customize the code.

相關文章