CSS

Como aplicar zoom em imagens com CSS

Benedito Silva Júnior 15/11/2021

Aplicar um efeito de zoom em imagens ao passar o mouse é uma maneira eficaz de adicionar interatividade e dinamismo ao seu site. Usando apenas CSS, você pode criar animações suaves e atraentes que aprimoram a experiência do usuário. Neste post, vamos aprender como aplicar zoom em imagens de forma simples e eficaz.

Estrutura básica de imagens em HTML

Antes de começarmos com o CSS, vamos definir a estrutura básica em HTML para as imagens:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zoom em Imagens com CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="zoom-container">
        <img src="imagem-exemplo.jpg" alt="Exemplo de imagem" class="zoom">
    </div>
</body>
</html>

Neste exemplo, temos um contêiner <div> que abriga a imagem. Vamos estilizar esse contêiner e a imagem para aplicar o efeito de zoom.

Aplicando Zoom com CSS

Agora que temos a estrutura HTML, vamos adicionar o CSS necessário para aplicar o efeito de zoom quando o usuário passa o mouse sobre a imagem.

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.zoom-container {
    width: 300px; /* Largura do contêiner */
    height: 200px; /* Altura do contêiner */
    overflow: hidden; /* Esconde qualquer parte da imagem que saia do contêiner */
    border: 5px solid #007BFF; /* Borda ao redor do contêiner */
    border-radius: 10px; /* Bordas arredondadas */
}

.zoom {
    width: 100%; /* A imagem ocupa 100% da largura do contêiner */
    height: 100%; /* A imagem ocupa 100% da altura do contêiner */
    object-fit: cover; /* Ajusta a imagem para cobrir o contêiner */
    transition: transform 0.5s ease; /* Transição suave ao aplicar o zoom */
}

.zoom-container:hover .zoom {
    transform: scale(1.2); /* Aumenta a escala da imagem em 1.2 vezes ao passar o mouse */
}

Explicação do CSS

Corpo da página: Estilizamos o corpo para centralizar o contêiner da imagem vertical e horizontalmente, criando uma experiência visualmente agradável;
Contêiner .zoom-container:
- O contêiner tem um tamanho fixo de 300×200 pixels, com bordas arredondadas e uma borda azul ao redor;
- A propriedade overflow: hidden garante que qualquer parte da imagem que vá além dos limites do contêiner seja ocultada.
Imagem .zoom:
- A imagem é configurada para cobrir totalmente o contêiner usando object-fit: cover, sem distorção;
- A propriedade transition: transform 0.5s ease cria uma animação suave, que é ativada quando o zoom acontece;
- No estado de hover (:hover), aplicamos a propriedade transform: scale(1.2), que aumenta o tamanho da imagem em 1.2 vezes, criando o efeito de zoom.

Resultado final

Ao passar o mouse sobre a imagem, ela se expande suavemente, criando um efeito de zoom atraente. Esse efeito pode ser aplicado em galerias de fotos, portfólios ou qualquer área do site onde você queira chamar a atenção para uma imagem.

Personalizações adicionais

Você pode personalizar o efeito de zoom conforme necessário:

Aumentar ou reduzir o zoom: Ajuste a propriedade scale(1.2) para um valor maior (como 1.5) ou menor (como 1.1), dependendo do grau de zoom desejado;
Velocidade da transição: Modifique a velocidade do efeito alterando o valor de transition: transform 0.5s ease. Aumente para um zoom mais lento (como 1s) ou diminua para um zoom mais rápido (como 0.3s);
Formato do contêiner: Use diferentes tamanhos e formatos de contêiner, como círculos, quadrados ou retângulos.

Zoom progressivo com sombra

Para adicionar mais estilo, você pode incluir uma sombra e um zoom progressivo:

.zoom-container:hover .zoom {
    transform: scale(1.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Adiciona uma sombra ao passar o mouse */
}

Aplicar zoom em imagens usando apenas CSS é uma maneira simples de adicionar interatividade e estilo ao seu site.

Com transições suaves e ajustes personalizados, você pode melhorar a experiência visual dos usuários e destacar imagens de forma criativa. Teste diferentes configurações para criar o efeito que melhor se adapta ao seu design!

Dúvidas ou sugestões sobre como aplicar zoom em imagens com CSS? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

O SEU COMPUTADOR ESTÁ TRAVANDO, DANDO "TELA AZUL" E DOR DE CABEÇA?
Aprenda a consertar o próprio computador como um profissional!
Especialize-se em manutenção preventiva e corretiva, diagnósticos de defeitos e upgrades com aulas passo a passo sem enrolação.
Torne-se também um técnico diferenciado e conquiste o emprego dos seus sonhos com este curso completo de Montagem e Manutenção de Desktops e Notebooks.

Clique na imagem abaixo e confira mais detalhes do curso: