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
/* 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
.parent:hover .child,
.parent:focus .child {
transform: scale(1.2);
}
xxxxxxxxxx
/*HTML*/
<img src="https://c1.staticflickr.com/1/628/22240194016_50afaeb84d_k.jpg" class="full zoom" alt="" />
/*CSS*/
body *,
html * {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
body {
overflow: hidden;
}
.full {
position: absolute;
width: 100%;
height: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: block;
}
.zoom {
animation: scale 40s linear infinite;
}
@keyframes scale {
50% {
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-ms-transform:scale(1.2);
-o-transform:scale(1.2);
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;
}