4

Gostaria de fazer um efeito que quando o usuário passe o mouse por cima do quadro o fundo ficasse branco, vido da esquerda para a direita primeiramente, e assim que esse efeito ficasse completo o texto aparecesse também vindo da esquerda para a direita. Tentei fazer isto, mas sem sucesso.

.overlay-hover {width: 300px}
.overlay-hover {cursor: pointer;position: relative;}
.title-transition {background-color: #fff;width: 100%;height: 100%;position: absolute;top: 0;right: 0;transition: all 500ms 500ms;}
.overlay {background-color: #fff;width: 0;height: 100%;transition: all 500ms;}
.overlay-hover:hover .overlay {width: 100%;}
.overlay-hover:hover .title-transition {width: 0%;}
<div class="overlay-hover">
    <span style="width: 100%;height: 200px;background-image: url('https://picsum.photos/200');background-size:cover;backgound-position:center;display: block;">			
        <div class="overlay">
          <h3>Lorem ipsum</h3>
          <div class="title-transition"></div>
        </div>
    </span>
</div>

EDITE

O efeito deverá acontecer em 3 passos:

1: O bloco deve aparecer deste formato:

Bloco sem efeito

2: Após o usuário passar o mouse o primeiro efeito aparece:

2.1: Executando o primeiro efeito:

executando o primeiro efeito

2.2: Fim do primeiro efeito:

fim do primeiro efeito

3: O segundo efeito deve surgir após o primeiro estar completo:

3.1 Execução do segundo efeito:

execução do segundo efeito

3.2: Segundo efeito completo:

segundo efeito completo

1
  • Pesquise sobre translate, keyfames e delay em css, vai te ajudar bastante em animaçoes futuras em css. Commented 26/02/2019 às 14:45

1 Resposta 1

3

Seu CSS estava meio confuso, preferi fazer uma versão do zero para ficar mais didático. Deixei a cor em amarelo apenas para facilitar a visualização, mas depois é só vc colocar as cores que quiser.

EDITE

Depois que o autor fiz algumas observações mudei o código. Agora position absolute nos filhos do container e left e width junto com um delay invertido no :hover para fazer a sincronização.

Repare nessa sequencia que na "ida" o texto tem um delay de 500ms, e na "volta" é a imagem que tem um delay de 500ms

.overlay h3 {
  transition: 1s width 0ms;
}
.overlay:hover h3 {
  transition: 1s width 500ms;
}
.overlay img {
  transition: 1s left 500ms;
}
.overlay:hover img {
  transition: 1s left 0ms;
}

inserir a descrição da imagem aqui

Segue o resultado da imagem acima:

.overlay {
    width: 200px;
    height: 100px;
    overflow: hidden;
    position: relative;
}
.overlay h3 {
  position: absolute;
  display: inline-block;
  white-space: nowrap;
  width: 0;
  overflow: hidden;
  top: 0;
  left: 0%;
  color: #000;
  transition: 1s width 0ms;
}
.overlay:hover h3 {
  width: 100%;
  transition: 1s width 500ms;
}
.overlay img {
  position: absolute;
  top: 0;
  left: 0;
  transition: 1s left 500ms;
}
.overlay:hover img {
  left: 100%;
  transition: 1s left 0ms;
}

  
<div class="overlay">
  <img src="https://placecage.com/200/100">
  <h3>Lorem ipsum</h3>
</div>


Opção 2

inserir a descrição da imagem aqui

Aqui o efeito é feito com um background com linear gradiente, ele tem 200% da largura do container, assim vc tem duas metades de 100% da largura do container, e com o background-position vc move esse gradiente dando a impressão que é um overlay

Depois disso é só colocar um transition no texto com delay, assim ele entre 500ms depois que o background se moveu, já para retornar eu removi o delay, ai eles volta para posição de forma correta sem sobreporem um ao outro

.overlay {
    width: 200px;
    height: 100px;
    background-image: linear-gradient(to right, #ff0 0%, #ff0 50%, #f00 50%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    background-position: 100% 0%;
    transition: 1s background-position;
    overflow: hidden;
}
.overlay:hover {
    background-position: 0% 0%;
}
h3 {
  display: inline-block;
  width: 100%;
  margin-left: -100%;
  transition: 1s margin-left ;
}
.overlay:hover h3 {
  margin-left: 0%;
  transition: 1s margin-left 500ms;
}
<div class="overlay">
  <h3>Lorem ipsum</h3>
</div>

6
  • Entendi o que você fez, e estava esperando pela tua resposta 🙏🏽 Mas acho que me expressei errado: o texto deve ficar fixo. O bloco que está com o background cinza irá ser uma imagem aleatória que tbm deve ficar fixa. Commented 26/02/2019 às 15:37
  • 1
    @Lucas esses tipos de coisa são as que mais gosto mesmo de fazer rss, se tiver alguma dúvida do que foi feito é só dar o toque.
    – hugocsl
    Commented 26/02/2019 às 15:40
  • 1
    @Lucas acho que entendi melhor agora. Só vou almoçar ali e depois edito a resposta.
    – hugocsl
    Commented 26/02/2019 às 15:43
  • @Lucas fiz uma edição no início da resposta olha ai
    – hugocsl
    Commented 26/02/2019 às 17:02
  • hugo, quase lá. Acredito que eu que não consigo explicar exatamente como é o efeito. Editei a pergunta tentando explicar melhor o efeito. Mil desculpas 😖 Commented 26/02/2019 às 17:45

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 .