JSFiddle - React, Tailwind, and code Playground

HTML

<form id="bilder" method="post">
<section class="images">
<article>
  <button class="deleteButton" name="bild4711">
    <div class="fakeImg" style="background-color:#f99"></div>
  </button>
</article>
<article>
  <button class="deleteButton" name="bild4711">
    <div class="fakeImg" style="background-color:#9f9"></div>
  </button>
</article>
<article>
  <button class="deleteButton" name="bild4711"><div class="fakeImg" style="background-color:#99f"></div></button>
</article>
<article>
  <button class="deleteButton" name="bild4711"><div class="fakeImg" style="background-color:#ff9"></div></button>
</article>
<article>
  <button class="deleteButton" name="bild4711"><div class="fakeImg" style="background-color:#f9f"></div></button>
</article>
<article>
  <button class="deleteButton" name="bild4711"><div class="fakeImg" style="background-color:#9ff"></div></button>
</article>
</section>
</form>

CSS

.images {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.images article {
  position: relative; overflow: hidden;
  margin: 1em; padding: 0; border: 0px;
}

.fakeImg {
   width: 200px; height: 200px; margin: 0;
}
.deleteButton {
  border: 0px; padding: 0; margin: 0;
  cursor: cell;
}
article:hover::after {
  position: absolute; height:100%; width: 100%; top: 0; left: 0;
  background: url(https://jsfiddle.net/img/logo.png);
  content: "X"; color: red;
  font: 100px Arial; text-align:center; 
}