JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

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

CSS

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

a I.fas {
  transition: opacity 0.15s ease-in-out;
  opacity: 1;
  position: absolute;
  top: 20px;
  left: 20px;
}

a:hover I.fas {t
  opacity: 1;

}

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

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