Dica do Elementor: Como criar um efeito de overlay com texto sobre uma imagem.

Como fazer um overlay com texto no Elementor.

Vamos aprender a criar o efeito mostrado no GIF, que uma sobreposição à uma imagem com texto.

Note que na imagem existe um efeito de sobreposição (overlay) com texto. Com a versão gratuita do Elemento é possível criar apenas o overlay sem o texto, mas, com um pouquinho de CSS podemos resolver este problema.

1. Acesse a área administrativa do WordPress (wp-admin)

2. No menu lateral, clique em Aparência > Personalizar



3. Na tela de Personalização do tema, procure pelo menu Custom CSS/JS

Acrescente o seguinte código no final da caixa de texto

  .textoOverlay{
      visibility: hidden;
  }
  .imgOverlay:hover .textoOverlay
  {
      visibility: visible;
  	-webkit-animation:zoomIn 1s;
  	animation:zoomIn 1s
  }

Agora, no Elementor, edite a página na qual deseja acrescentar este efeito.

Para este exemplo vou criar uma pequena galeria usando o elemento Inner Section de 3 colunas.

Na primeira coluna irei definir uma imagem de fundo.

Naturalmente a imagem não irá aparecer na coluna, pois precisamos colocar algum conteúdo dentro dela. Arraste para dentro da coluna um elemento de Texto ou Título. Defina também um espaçamento de padding para que o texto tenha uma distância em relação à borda da coluna, o resultado deverá ser este;

Agora precisamos deixar o fundo do texto com opacidade. Para isso, clique sobre o elemento de texto e nas configurações de Avançado, defina um fundo preto com opacidade, o resultado será este;

Agora vem a parte mais fácil, o elemento de texto deve receber a classe .textoOverlay criada no início desta aula. Você também poderá definir a classe nas configurações de Avançado.

Após inserir a classe textoOverlay no elemento de texto, ele automaticamente irá sumir.

Agora faça o mesmo com a coluna, edite a coluna e defina a classe imgOverlay

Prontinho!

O resultado final será este;