<div class="list">
  <div class="row" onclick="alert('row 1')">
    <img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg">
    <span>Row 1</span>
  </div>
  <div class="row" onclick="alert('row 2')">
    <img src="https://i.kym-cdn.com/photos/images/original/001/658/356/476.jpg">
    <span>Row 2</span>
  </div>
  <div class="row" onclick="alert('row 3')">
    <img src="https://i.kym-cdn.com/photos/images/original/001/655/927/d52.jpg">
    <span>Row 3</span>
  </div>
</div>

@use postcss-preset-env {
  stage: 0;
}

body {
  padding: 2rem;
}

.list {
  display: grid;
  grid-template-columns: 10rem auto;
  grid-auto-rows: 8rem;
}

.row {
  display: contents;
  
  &:hover > * {
    background: beige;
  }
}

img, span {
  padding: 1rem;
}

img {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  object-fit: cover;
}

span {
  display: flex;
  align-items: center;
}

.row:hover span {
  text-decoration: underline;
}