a .image-wrap{
  position: relative;
  display: inline-block;
}
a .image-wrap::after{
  position: absolute;
  transition: background 0.3s ease-out;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
@media ( hover : hover ) {
  a:hover,
  a:hover span{
    text-decoration: underline;
  }
  a:has(.image-wrap):hover{
    opacity: 1;
  }
  a:hover .image-wrap::after{
    background-color: #ffffff9c;
  }
  a:hover, a:active{
    color: inherit;
  }
}