Image hover reveal text

by Roberto Apasajja

HTML

<div class="wrapper">
  <div class="dua">
    hgfghhj jhgjgjh gjhg
  </div>
  <div class="satu"></div>
</div>

CSS

body, html {
  margin: 0;
}
* {
  transition: 1s;
}
.satu {
  width: 300px;
  height: 300px;
  background: url(https://placekitten.com/300/300);
}
.dua {
  width: 300px;
  height: 300px;
  color: blue;
  background: grey;
  position: absolute;
  opacity: 0;
  transition: 1s;
}
.wrapper {
  width: 300px;
  height: 300px;
}
.wrapper:hover .dua {
  opacity: 1;
}