body {
  background-color: #575656;
  background-image: url(kiw.gif);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
}
body .w {
  max-width: 450px;
  margin: auto;
}

body .w .i {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
}
body .w .i:: {
  --size: 45px;
  width: var(--size);
  height: var(--size);
  content: "";
  position: absolute;
  background-color: rgba(255, 255, 255, 0.4941176471);
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  opacity: 0.5;
  animation: 1s tras linear infinite;
  text-transform: uppercase;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  border: 2px solid rgba(233, 233, 233, 0.4941176471);
}
@keyframes tras {
  50% {
    opacity: 1;
    box-shadow: 0 0 0 15px rgba(204, 204, 204, 0.3803921569);
  }
}
body .w .i img {
  opacity: 0.7;
  width: 100%;
  transition: all 0.2s ease-in;
}
body .w .i:hover img {
  opacity: 1;
}