2021-10-18 Playlist Hover Pure CSS HTML

by Ttt Yyy

HTML

<!DOCTYPE HTML> 
<html>
<head></head> 
<body>
  Pure HTML/CSS
  <div class='container'>
    <div class='leftCol'>
      Image
    </div>
    <div class='rightCol'>
      Content
      <ul id='pureHTMLCSSList'>
        <li class='listItem'>
          Bulbasaur
          <img src='https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/bulbasaur.png'>
        </li>
        <li class='listItem'>
          Charmander
          <img src='https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/charmander.png'>
        </li>
        <li class='listItem'>
          Squirtle
          <img src='https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/squirtle.png'>
        </li>
      </ul>
    </div>
  </div>
</body>
</html>

CSS

.container {
  display: flex;
  position: relative;
}

.leftCol {
  border: 1px solid red;
  height: 100px;
  width: 100px;
}

.rightCol {
  border: 1px solid blue;
  flex: 1 1 auto;
}

.listItem > img {
  display: none;
}

.listItem:hover {
  color: gray;
}

.listItem:hover > img {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
}

.pokemonName:hover {
  color: gray;
}