<div class="tile">
  <div class="overlay">
    this is text
  </div>
</div>
.tile {
  width: 80px;
  height: 80px;
  border: 1px solid blue;
  background-color: skyblue;
  box-sizing: border-box;
  transition: 1s transform;
  transform-origin: 0px 0px;
  position: relative;
}

.overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: magenta;
  opacity: 0;
  touch-action: none;
  transition: opacity 1s;
}

.tile:hover .overlay {
  opacity: 1;
  touch-action: auto;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.