2021-01-23 ProfilePic

by Ttt Yyy

HTML

<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>

CSS

.container {
  /* display element in inline */
  display: inline-block;
  position: relative;
}

/* a {
  text-decoration: none;
} */

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

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

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