JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>
    <img src="http://lorempixel.com/100/100" />  
    <a>link 1</a>
    <div class="fakebg"></div>
  </li>
  <li>
    <img src="http://lorempixel.com/100/100" /> 
    <a>link 2</a>
    <div class="fakebg"></div>
  </li>
  <li>
      <img src="http://lorempixel.com/100/100" class="whiteImg" />
      <a>link 3</a>
    <div class="fakebg"></div>
  </li>
</ul>

CSS

li, li * {
    position: relative;
    z-index: 2;
    direction:rtl
}
.whiteImg ~ .fakebg {
    display: block;
    position: absolute;
    z-index: 1;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: black;
}

.whiteImg ~ a {
    color: white;
}