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 > img {
  -webkit-filter: brightness(100%);
}

a:hover > img {
          -webkit-filter: brightness(70%);
          -webkit-transition: all 1s ease;
          -moz-transition: all 1s ease;
          -o-transition: all 1s ease;
          -ms-transition: all 1s ease;
          transition: all 1s ease;
}