<div class="container">
  <div><img src="https://www.placecage.com/g/200/300" /></div>
  <div><img src="https://www.placecage.com/g/200/300" /></div>
  <div><img src="https://www.placecage.com/g/200/300" /></div>
  <div><img src="https://www.placecage.com/g/200/300" /></div>
  <div><img src="https://www.placecage.com/g/200/300" /></div>
  <div><img src="https://www.placecage.com/g/200/300" /></div>
  <div><img src="https://www.placecage.com/g/200/300" /></div>
  <div><img src="https://www.placecage.com/g/200/300" /></div>
</div>
// Simple Flex Container
.container {
  display: grid;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

// img with an opacity transition.
img {
  width: 50px;
  cursor: pointer;
  transition: opacity 0.2s;
}

// On container hover, fade images not actively hovered.
.container:hover img:not(:hover) {
  opacity: 0.5;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.