-2

boa tarde! Tudo bem?

Gostaria que quando a pessoa entrasse no site, a imagem surgisse suavemente. Estou tentando com opacity e visibility, mas não está dando certo.

Código CSS abaixo:

header {
   width: 1000px;
   height: auto;
   margin: 0px auto;
}

header img {
   display: block;
   margin-left: auto;
   margin-right: auto;
   visibility: hidden;
}

img {
   visibility: visible;
   transition: 2s;
}

Poderiam ajudar a como fazer ou alguma sugestão?

2

1 Resposta 1

0

Neste caso você pode usar javascript e CSS, com javascript você irá adicionar uma classe CSS no body logo após a página ser carregada. Com está classe você vai setar que a imagem do header pode sair da opacidade 0 para 1

//Javascript
window.addEventListener('load', ()=> {
  document.body.classList.add('page-loaded')
});
//CSS
header {
   width: 1000px;
   height: auto;
   margin: 0px auto;
}

header img {
   display: block;
   margin-left: auto;
   margin-right: auto;
   opacity: 0
}

.page-loaded header img {
   opacity: 1;
   transition: opacity 2s ease
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .