CSS > Transiciones

by academiax

HTML

<div>
  <img class="Bottom" src="https://s3.getstickerpack.com/storage/uploads/sticker-pack/troll-face-1/sticker_8.png?655b17067df1601e75cc33e267fe806f" />
  <div class="Top"><strong>Transiciones</strong></div>
</div>

CSS

.Top {
  background-color: lightblue;
  width: 100px;
  height: 100px;
  opacity: 1;
  transition: opacity 2s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Bottom {
  position: absolute;
  width: 100px;
  height: 100px;
  z-index: -1;
}

.Top:hover {
  opacity: 0;
}