Как сделать эффект выхода из белого для картинки с текстом?

Question

[Ne0n5amura1]

Как сделать чтобы при вхождении на сайт, картинка медленно появлялась из белого вместе с текстом (Просто начальная заставка типа "добро пожаловать, "username" " и кнопка для перехода на ресурс)

Answer 1

[Алексей Струков]

Проще через анимацию.

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

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

Answer 2

[WhiteSama]

задаешь класс show после загрузки страницы

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

Comments

[Ne0n5amura1]

А как это после загрузки ? (я нуб, так что не ругай сильно, плес)

[WhiteSama]

jquery: $(window).load(function(){ $(img).addClass('show') })