<div class="image-hover centered">
  <img src="https://loremflickr.com/640/640" data-text="Text Here" />
</div>
<div class="help">
  Hover zoom effect pure css
</div>

.image-hover {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border: 4px solid #fff;
}
.image-hover img {
  width: 100%;
  height: 100%;
  transition: all 3s ease;
}
.image-hover:hover img {
  transition: all 3s ease;
  transform: scale(1.8);
}

/* EXAMPLE STYLE */
body {
  background-color: #4f4f4f;
  font-family: "Roboto", sans-serif;
}
.centered {
  position: absolute;
  left: 50%;
  top: 100px;
  transform: translateX(-50%);
}
.help {
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 1.5rem;
  margin-top: 20px;
}

/* ESLint rules https://eslint.org/docs/2.0.0/rules/ */
/* eslint no-undef: "off" */