Como posso diminuir o zoom para outro efeito de transição de imagem

Estou procurando fazer a transição de imagens com o zoom reduzido para a 2ª, 3ª imagem, etc. Tentei criar alguns quadros-chave por meio de imagem de fundo e escala, e funcionou decentemente, exceto que havia dois problemas. 1. Meu texto e botões também foram redimensionados, 2. a duração das imagens foi muito curta. Eu o incluiria, mas o excluí, pois não era o que estava procurando. Não tenho certeza se é possível fazer isso com CSS puro, pelo menos não com facilidade. Então, eu estou inclinado a ter que usar JS? Aqui está meu código atual.

.jumbo {
  display: flex;
  flex-direction: column;
  justify-content: Center;
  margin: 0;
  width: 100vw;
  height: 100vh;
  min-height:100vh;
  background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3)),
    url("images/j-img1.png");
  background-repeat:no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.jumbo-text {
  text-align: center;
  color: white;
  font-weight: 600;
}

/* Jumbo button */
.vmore-button {
  text-align: center;
  border: 2px solid white;
  text-transform: uppercase;
  padding: 16px;
  align-self: Center;
  margin: 20px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 24px;
  transition: 0.5s ease;
  color: white;
  max-height: 70px;
  cursor:pointer;
}

    <div class="jumbo">
      <h2 class="jumbo-text">
        Welcome to LLG
      </h2>
      <h3 class="jumbo-text animated slideInLeft delay-1s" style="color:#e8e8e8; font-weight:500;">
        Memorable Gaming Experience, High Quality Servers.
      </h3>
      <a class="vmore-button hvr-icon-pulse-shrink" href="#viewmore">View more<br><i class="fas fa-arrow-circle-down hvr-icon"></i></a>
    </div>

Expandir snippet

html css Tim
fonte

Eu acho que seria melhor se você fornecesse o código que tentou, não consigo ver o que você fala ... ou pode ser que meu inglês não seja bom

Ayman Morsy 18/01

Estou curioso sobre o +8 nesta questão pouco clara, onde não há código relacionado a qualquer animação

Temani Afif

Respostas:

Você precisará de uma div de contêiner e dois divisores filhos. O primeiro filho deve lidar com imagens com zoom / transição, o segundo filho deve conter seu texto. As imagens e os divisores de texto devem ser posicionados em absoluto para que fiquem um em cima do outro. Você pode alterar qual extensão / imagem está ativa / visível aplicando uma classe específica ao contêiner pai.

<div class="container">
  <div class="images">
    <img>
    <img>
    <img>
  </div>
  <div class="text">
    <span>TextA</span>
    <span>TextB</span>
    <span>TextC</span>
  </div>
</div>

Tom Shaw
fonte

Obrigado, acho que este será um bom ponto de partida para o que estou tentando alcançar.

Tim

Apenas mais algumas perguntas. Eu deveria estar aplicando absoluto em imagens e texto? Eu estava brincando com isso e fiz isso, e o texto aparece sobre as imagens. Mas as imagens ainda estão no fluxo normal de documentos. Não é até eu colocar absoluto nas imagens reais e quando faço isso as lê de baixo para cima. E eu vou ter que nos JS para aplicar as classes visíveis certo?

Tim

Essa é uma excelente pergunta. As imagens podem ter um estilo absoluto e você pode fazer um efeito de dissolução da opacidade, ou elas podem ser exibidas em bloco inline onde as imagens deslizam pelas laterais, ou exibem blocos e animações usando a translação translúcida de baixo para cima. Confira este youtu.be/tkXUzVNl6Rw?t=68

Tom Shaw

Parece bom. Mas você tem alguma idéia de por que ele exibe as imagens do último ao primeiro?

Tim

Não sei se é isso que você quer dizer com sua solicitação

.jumbo {
  display: flex;
  flex-direction: column;
  justify-content: Center;
  margin: 0;
  width: 100vw;
  height: 100vh;
  min-height:100vh;
  background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3)),
    url("https://img.freepik.com/free-vector/abstract-colorful-flow-shapes-background_23-2148258092.jpg");
  background-repeat:no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.jumbo-text {
  text-align: center;
  color: white;
  font-weight: 600;
}

/* Jumbo button */
.vmore-button {
  text-align: center;
  border: 2px solid white;
  text-transform: uppercase;
  padding: 16px;
  align-self: Center;
  margin: 20px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 24px;
  transition: 0.5s ease;
  color: white;
  max-height: 70px;
  cursor:pointer;
}
@media only screen and (max-width: 600px) {
  .jumbo {
    background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3)),
    url("https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg");
  }
}

<div class="jumbo">
  <h2 class="jumbo-text">
    Welcome to LLG
  </h2>
  <h3 class="jumbo-text animated slideInLeft delay-1s" style="color:#e8e8e8; font-weight:500;">
    Memorable Gaming Experience, High Quality Servers.
  </h3>
  <a class="vmore-button hvr-icon-pulse-shrink" href="#viewmore">View more<br><i class="fas fa-arrow-circle-down hvr-icon"></i></a>
</div>

Expandir snippet

uma imagem é colocada quando a largura é 600 e menor. Você pode testá-lo

Hesham Mohamed
fonte