CSS

zoom animations in css

.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);
  }
}

how to use image zoom effect in css

.parent:hover .child,
.parent:focus .child {
  transform: scale(1.2);
}

auto zoom image css

/*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);
  }
}

how to use image zoom effect in css

.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;
}