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
-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-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
<div class="cardcontainer">
<img class="galleryImg" src="https://www.google.com/logos/doodles/2014/2014-winter-olympics-5710368030588928-hp.jpg">
</div>
@keyframes zoominoutsinglefeatured {
0% {
transform: scale(1,1);
}
50% {
transform: scale(1.2,1.2);
}
100% {
transform: scale(1,1);
}
}
.cardcontainer img {
animation: zoominoutsinglefeatured 1s infinite ;
}
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;
}