JSFiddle - React, Tailwind, and code Playground

by pashkes

HTML

<ul>
  <li>
    <img src="http://via.placeholder.com/140x100" alt="" class="active">
    <img src="http://via.placeholder.com/350x150" alt="">
    <img src="http://via.placeholder.com/200x100" alt="">
  </li>
</ul>

SCSS

li {
  position: relative;
  width: 100px;
  height: 300px;
  img:not(.active) {
    opacity: 0;
  }
  img {
    top: 0;
    left: 0;
    position: absolute;
    transition: 2s;
  }
}

.active {
  opacity: 1;
}

JavaScript

const item = document.querySelector('li');

item.addEventListener('mouseover', function (evt){
	this.querySelector('img')
  const i = this.querySelector('.active');
  console.log(i.indexOf())
  
  //this.querySelector('.active').classList.remove('active')
});