JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image">
  <a href="http://www.example.com">
    <img src="https://i.kinja-img.com/gawker-media/image/upload/s--pEKSmwzm--/c_scale,fl_progressive,q_80,w_800/1414228815325188681.jpg" class="rggclImgCenter">
  </a>
</div>

CSS

img { max-width: 300px; }

.image a { position: relative; display: inline-block; }
.image a:hover:before {
  position: absolute;
  top: 30px; left: 40px;
  display: inline-block;
  content: '';
  width: 300px; height: 164px;
  background-image: url('https://i.kinja-img.com/gawker-media/image/upload/s--pEKSmwzm--/c_scale,fl_progressive,q_80,w_800/1414228815325188681.jpg');
  background-size: 300px 164px;
  opacity: .5;
}