JSFiddle - React, Tailwind, and code Playground

Playlist Hover Playground: CSS HTML

by Ttt Yyy

HTML

<!DOCTYPE HTML> 
<!-- <head /> 
<body> -->
  <div class='container'>
<!--   <div class="leftCol">
    <div>
       Image
    </div>
  
  </div> -->
<div class='rightCol'>
  Content
    <ul>
  
    <li class='pokemonName'>
       Chikorita
       <img src='https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/chikorita.png'>
    </li>
     <li class='pokemonName'>
       Cyndaquil
       <img src='https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/cyndaquil.png'>
    </li>
     <li class='pokemonName'>
       Totodile
       <img src='https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/totodile.png'>
    </li>
  </ul>
 </div>

  </div>
  
<!--  </body>-->

CSS

.container {
  /* display: flex; */
  position: relative;
}
 
/* .leftCol {
  width: 100px;
  border: 1px solid green;
} */

.rightCol {
  /* margin: none; */
  margin-left: 100px;
  /* flex: 1 1 auto; */
  border: 1px solid red;
  height: 100px;
}

.rightCol ul{
  /* list-style: none */
  /* padding: 0 */
}

.pokemonName  img {
  /* display: none; */
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
}

.pokemonName:hover {
  color: gray;
}

.pokemonName:hover img {
  /* display: flex; */
  visibility: visible;
/*   position: absolute;
  left: 0;
  top: 0; */
}


/* .pokemonName img {
  border: 1px solid blue;
} */