A
Abu Ali
Similar to Ken Burns for Block Background
We need now the "Hover Pan & Zoom Effect" for Image Galleries, Carousels and Photo Grids, where hovering over an image causes it to zoom in or out, and sometimes also pan slightly to create a dynamic interaction.
I asked ChatGPT and here is the result:
Here's an example of how to achieve a hover zoom effect using HTML and CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Zoom Effect</title>
<style>
.image-gallery {
display: flex;
gap: 10px;
}
.image-gallery img {
width: 200px;
height: 200px;
object-fit: cover;
transition: transform 0.5s ease;
}
.image-gallery img:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="image-gallery">
<img src="https://via.placeholder.com/200" alt="Image 1">
<img src="https://via.placeholder.com/200" alt="Image 2">
<img src="https://via.placeholder.com/200" alt="Image 3">
</div>
</body>
</html>
In this example:
The .image-gallery class creates a simple flexbox container for the images.
The images inside the gallery have a width and height set to 200px, and the object-fit: cover property ensures the images cover the entire area without distortion.
The transition property on the images ensures a smooth transformation effect.
The :hover pseudo-class on the images applies a transform: scale(1.2) property to scale the image up by 20% when hovered over, creating the zoom effect.
You can adjust the transform property to also include translate values if you want to add a panning effect along with the zoom. Here's an example that adds both zoom and a slight pan effect:
.image-gallery img:hover {
transform: scale(1.2) translate(10px, 10px);
}
This will make the image zoom in and slightly pan to the bottom-right when hovered over. Adjust the translate values as needed for your specific layout and design.
Kind Regards,
Mohammad