JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<a
   id="image-1"
   class="close"
   href="#"
   onclick="delete_img(this.id);"
>
  <i id="1" class="fa fa-times">close icon</i>
  <img 
    src="https://goo.gl/7ZJKoU"/> 
</a>

<a
   id="image-2"
   class="close"
   href="#"
   onclick="delete_img(this.id);"
>
  <i id="2" class="fa fa-times">close icon</i>
  <img 
    src="https://goo.gl/7ZJKoU"/> 
</a>

<a
   id="image-3"
   class="close"
   href="#"
   onclick="delete_img(this.id);"
>
  <i id="3" class="fa fa-times">close icon</i>
  <img 
    src="https://goo.gl/7ZJKoU"/> 
</a>

<a
   id="image-4"
   class="close"
   href="#"
   onclick="delete_img(this.id);"
>
  <i id="4" class="fa fa-times">close icon</i>
  <img 
    src="https://goo.gl/7ZJKoU"/> 
</a>

<a
   id="image-5"
   class="close"
   href="#"
   onclick="delete_img(this.id);"
>
  <i id="5" class="fa fa-times">close icon</i>
  <img 
    src="https://goo.gl/7ZJKoU"/> 
</a>

<a
   id="image-6"
   class="close"
   href="#"
   onclick="delete_img(this.id);"
>
  <i id="6" class="fa fa-times">close icon</i>
  <img 
    src="https://goo.gl/7ZJKoU"/> 
</a>

CSS

a {
  display: block;
  position: relative;
  float: left;
}

a I.fa {
  transition: opacity 0.15s ease-in-out;
  opacity: 0;
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  z-index: 2;
}

a:hover I.fa {
  opacity: 1;

}

a:after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: black;
  opacity: 0;
}

a:hover:after {
  opacity: .5;
}

img {
  display: block;
}