JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <a href="#">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTojc9ycyhwL6TnP_lEhQrTXy8Cjrs738WeDmnDOmIXGmR20NEJTw">
    </a>
</div>
<div class="wrapper">
    <a href="#">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTojc9ycyhwL6TnP_lEhQrTXy8Cjrs738WeDmnDOmIXGmR20NEJTw">
    </a>
</div>
<div class="wrapper">
    <a href="#">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTojc9ycyhwL6TnP_lEhQrTXy8Cjrs738WeDmnDOmIXGmR20NEJTw">
    </a>
</div>

CSS

.wrapper {
  width: 25%;
  display: inline-block;
}

a {
  background: black;
  display: block;
}

img {
  width: 100%;
  margin: 0;
}

a:hover > img {
  opacity: .8;
   -webkit-transition: opacity .2s ease-out;
    transition: opacity .2s ease-out;
}