.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);
}
}
.parent:hover .child,
.parent:focus .child {
transform: scale(1.2);
}
/*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);
}
}
.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;
}