xxxxxxxxxx
/* CSS code to zoom in the image on hover */
.image-container {
position: relative;
}
.image-container img {
transition: transform 0.3s ease;
}
.image-container:hover img {
transform: scale(1.2);
}
xxxxxxxxxx
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}
.image-container {
position: relative;
overflow: hidden;
width: 300px;
height: 300px;
border: 1px solid #ccc;
}
.image-container img {
width: 100%;
height: 100%;
transition: transform 0.3s ease-in-out;
}
.image-container:hover img {
transform: scale(1.2); /* Adjust the scale value as needed for desired zoom level */
}
xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
width: 200px;
height: 200px;
overflow: hidden;
}
.image-container img {
transition: transform 0.3s ease;
}
.image-container img:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="image-container">
<img src="your-image.jpg" alt="Your Image">
</div>
</body>
</html>
xxxxxxxxxx
.zoom-image {
/* Set dimensions as per your design */
width: 200px;
height: 200px;
overflow: hidden;
}
.zoom-image img {
/* Transition for smooth zoom animation, change duration as per preference */
transition: transform 0.3s;
}
.zoom-image:hover img {
/* Apply zoom effect on hover */
transform: scale(1.2);
}
xxxxxxxxxx
.parent:hover .child,
.parent:focus .child {
transform: scale(1.2);
}
xxxxxxxxxx
/* Point-zoom Container */.point-img-zoom img { transform-origin: 65% 75%; transition: transform 1s, filter .5s ease-out;}/* The Transformation */.point-img-zoom:hover img { transform: scale(5);}
xxxxxxxxxx
.parent {
width: 400px;
height: 300px;
}
.child {
width: 100%;
height: 100%;
background-color: black; /* fallback color */
background-image: url("images/city.jpg");
background-position: center;
background-size: cover;
}