xxxxxxxxxx
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
-o-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
xxxxxxxxxx
.zoom-in-out-box {
margin: 24px;
width: 50px;
height: 50px;
border:1px solid green;
background: #f50057;
animation: zoom-in-zoom-out 1s ease infinite;
}
@keyframes zoom-in-zoom-out {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.5, 1.5);
}
100% {
transform: scale(1, 1);
}
}
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);
}