handling images of various qualities

by Jake

HTML

<nav>
<b>Set variant styles</b>
<a href="#" id="setBase">reset</a> |
<a href="#" id="setv1">variant one: rounded</a> |
<a href="#" id="setv2">variant two: grayscale</a> |
</nav>

<main>
  <a href="#">
    <img src="https://faces-img.xcdn.link/image-lorem-face-5788.jpg">
    <p>Bob</p>
  </a>
  <a href="#">
    <img src="https://faces-img.xcdn.link/image-lorem-face-5842.jpg">
     <p>Marzi</p>
  </a>
  <a href="#">
    <img src="https://faces-img.xcdn.link/image-lorem-face-6047.jpg">
     <p>Khalid</p>
  </a>
  <a href="#">
    <img src="https://faces-img.xcdn.link/image-lorem-face-338.jpg">
     <p>Judah</p>
  </a>
</main>

CSS

main {
  margin-block: 3em;
  display: flex;
  gap: 1.5em;
}

main a {
  display: flex;
  flex-direction: column;
  align-items: center;
}

main img {
  width: 150px;
  /* http://developer.mozilla.org/en-US/docs/Web/CSS/object-fit */
  object-fit: cover;
}

main.v1 img {
   border-radius: 100%;
}

main.v2 img {
  filter: grayscale(1);
  transition: .2s filter;
}
main.v2 a:hover img {
  filter: grayscale(0);
}








nav {
  background: black;
  padding: 5px 10px;
  display: flex;
  gap: 1em;
}
nav b { color: white }
nav a {
  color: pink;
}

JavaScript

document.addEventListener("DOMContentLoaded", function () {
	const mainEl = document.querySelector('main');
	document.querySelector('#setv1').addEventListener('click', e => mainEl.classList.toggle('v1'));
	document.querySelector('#setv2').addEventListener('click', e => mainEl.classList.toggle('v2'));
	document.querySelector('#setBase').addEventListener('click', e => mainEl.classList.remove('v2', 'v1'));
});