Overlay Efeito Scale

Overlay Efeito Scale

Criar interações visuais suaves e modernas em interfaces web é uma das chaves para melhorar a experiência do usuário. Um dos efeitos mais populares e fáceis de implementar é o overlay com efeito scale, que consiste em aplicar um fundo escurecido (ou colorido) sobre uma imagem e exibir algum conteúdo adicional ao passar o mouse, com uma animação de escala que dá destaque ao elemento.

O que é o efeito scale com overlay?

O efeito scale é uma transformação visual aplicada a um elemento, geralmente usando a propriedade transform: scale(), que altera o tamanho do objeto suavemente. Quando combinamos esse efeito com um overlay — uma camada que aparece sobre o conteúdo — conseguimos criar uma interação visual elegante, muito usada em galerias de imagens, cards de produtos, ou seções com chamadas para ação.

Neste artigo, vamos mostrar como criar esse efeito usando apenas HTML e CSS, sem a necessidade de JavaScript.

Nesta seção, projetaremos uma estrutura simples na tag <article>,<img>, <div>, <h2> e a <href> para inserirmos o link de destino. 

Essas são as tags que usaremos para criar o nosso Overlay com efeito Scale com css.

Vamos Adicionar o HTML

Exemplo Prático: Overlay em uma Imagem

Imagine um cenário onde você deseja exibir um título ao passar o mouse sobre uma imagem. A estrutura HTML poderia ser algo como:

  <article class="overlay">
                
    <img src="uploads/foto.jpg" alt="foto.jpg">
    <div class="zoomin">
      <h2 class="title-hover"><a href="#" title="Leia mais">Leia mais</a></h2>
    </div>
                
  </article>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso Overlay efeito Scale.

.overlay {
  
  margin: auto;
  width: 400px;
  height: 250px;
  position: relative;
  color: white;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.50);

}

.overlay img {

  width: 100%;
  height: 100%;
  transform: scale(1);
  transition: transform 0.5s;

}

.title-hover a { color:#ffffff; text-decoration:none; }

.title-hover {

  font-weight: 300;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 2px;

}

.title-hover {
  margin: 0;
}

.zoomin {

  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 8px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: auto;
  bottom: 0;
  opacity: 0;
  transform: scale(0.5);
  transition: transform 0.5s ease, opacity 0.5s ease;

}

.overlay:hover img {

  transform: scale(1.5);
  transition: transform 0.5s;

}

.overlay:hover .zoomin {

  opacity: 1;
  transform: scale(1);

}

Conclusão

O efeito de overlay com scale em CSS é uma técnica visual poderosa, simples de aplicar e altamente personalizável. Ele pode ser utilizado em diversos contextos para enriquecer a interação visual de um site, sem comprometer a performance ou exigir scripts adicionais.

Você pode experimentar diferentes cores de overlay, transições mais rápidas ou lentas, e até adicionar ícones ou botões interativos dentro da camada para criar uma experiência ainda mais envolvente.

Combinando as Duas seções acima com Html e Css  temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando