<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>HAS</title>

  <!-- Mobile viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

<body>

  <h1>has() :hover</h1>

  <ul class="gallery">
    <li>
      <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dHJvcGljYWwlMjBiZWFjaHxlbnwwfHwwfHw%3D&w=1000&q=80" />
    </li>
    <li>
      <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dHJvcGljYWwlMjBiZWFjaHxlbnwwfHwwfHw%3D&w=1000&q=80" />
    </li>
    <li>
      <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dHJvcGljYWwlMjBiZWFjaHxlbnwwfHwwfHw%3D&w=1000&q=80" />
    </li>
    <li>
      <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dHJvcGljYWwlMjBiZWFjaHxlbnwwfHwwfHw%3D&w=1000&q=80" />
    </li>

  </ul>

</body>

</html>
html,
body {
  margin: 0;
  padding: 0;
  background: #000;
}

body {
  display: flex;
  flex-direction: column;
  place-items: center;
  height: auto;
  color: #fff;
  min-height: 100vh;
  font-family: sans-serif;
  padding: 30px;
}

*,
*:before,
*:after {
  box-sizing: content-box;
}

h1 {
  margin-top: auto;
}

ul {
  padding: 0;
  list-style: none;
}
li {
  padding-bottom: 100%;
  position: relative;
}
img {
  position: absolute;
  object-fit: cover;
  height: 100%;
  width: 100%;
  max-width: 100%;
  transition: transform 0.25s, opacity 0.25s;
  marign: -1px;
}
.gallery {
  max-width: 1000px;
  width: 100%;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
  margin-bottom: auto;
}

/* where the magic happens */

.gallery:has(li:hover) li:not(:hover) img {
  transform: scale(0.8);
  opacity: 0.3;
}
/* no js! */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.