JSFiddle - React, Tailwind, and code Playground

by joepenzo

HTML

<div class="images">
<img src="http://placehold.it/300x300/00ff00" class="img-1">
<img src="http://placehold.it/300x300/ff000" class="img-2">
</div>

<div class="images">
<img src="http://placehold.it/300x300/00ff00" class="img-1">
</div>

SCSS

.images {
  position: relative;
  float: left;
  width: 300px;
  height: 300px;
  margin: 30px;
  img {
    transition: all 300ms linear;
    position: absolute;
    opacity: 1;
  }
}


.images:hover {
  .img-2 {
    opacity: 0;
  }
}