JSFiddle - React, Tailwind, and code Playground

HTML

<div id='main'>
  <img class="bg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Nevada_265.svg/600px-Nevada_265.svg.png">
  <a class="_6" href="//google.com/?q=6" title="6"></a>
</div>

CSS

#main {
  width: 100%;
  position: relative;
}

#main .bg {
  display: block;
  max-width: 100%;
  width: 100%;
}
#main ._6 {
  display: block;
  border-radius: 50%;
  width: 17.6%;
  height: 17.6%;
  left: 41%;
  top: 29%;
  position: absolute;
  border: 2px solid #66afe9;
  box-shadow: 4px 10px 15px rgba(0, 0, 0, 0.25) inset, 0px 0px 8px rgba(102, 175, 233, 0.6);
  -webkit-transform: scale(1);
  transform: scale(1);
  transition: all .5s ease-out;
  overflow: hidden;
}
#main ._6:hover {
  border: 2px solid #a94442;
  box-shadow: 4px 10px 15px rgba(0, 0, 0, 0.3) inset, 0px 0px 8px rgba(246, 48, 45, 0.87);
  filter: invert(100%);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
#main ._6:after{
  transition: all .5s ease-out;
}
#main ._6:hover:after {
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  display: block;
  background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Nevada_265.svg/600px-Nevada_265.svg.png") no-repeat center center;
  background-size: cover;
}