JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<img src="https://www.imarc.com/img/site/imarc_20th_logo_shine_new.gif" alt="">

<div class="dark">
  <img src="https://www.imarc.com/img/site/imarc_20th_logo_shine_new.gif" alt="">
</div>

<div class="light">
  <img src="https://www.imarc.com/img/site/imarc_20th_logo_shine_new.gif" alt="">
</div>

CSS

img {
  width: 200px;
  padding: 2rem;
  transition: filter 250ms;
}


.dark {
  background: #1a1a1a;
}

.dark img {
filter: grayscale(100%) brightness(2) contrast(2);
}

.light img {
filter: grayscale(100%) brightness(.5) contrast(2);
}

img:hover {
  filter: none;
}