How to make an out-of-white effect for an image with text?

Question

User interface

How to make the image slowly appear from white along with the text when entering the site (Just an initial splash screen like "welcome, "username"" and a button to go to the resource)

Answer 1

Easier through animation.

@keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.block-with-text {
  animation: opacity 1s;
}

Answer 2

set show class after page load

img {
opacity: 0;
transition:1s;
}
img.show {
opacity:1;
}