JSFiddle - React, Tailwind, and code Playground

by Ttt Yyy

HTML

<!DOCTYPE html>
<!-- <html>
<head /> 
<body> -->
  <div class='container'>
    <a href='https://www.google.com'>
      <img class='profilePicture' src='https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/pikachu.png' />
    </a>
     <a href='https://www.youtube.com'>
       <img class='edit'  src='https://cdn4.iconfinder.com/data/icons/design-4/100/14-512.png' />
     </a>
    
  </div>
<!-- </body>
</html> -->

CSS

.container {
  display: inline-block;
  position: relative;
}

.profilePicture {
  height: 120px;
  width: 120px;
}

.edit {
  position: absolute;
  height: 20px;
  width: 20px;
  right: 0;
  top: 0;
  visibility: hidden;
}

.container:hover .edit {
  visibility: visible;
}