CSS

Zoom em imagem com CSS puro (fácil e rápido)

26 de dezembro de 2019

Zoom em imagem com CSS puro (fácil e rápido)

Neste artigo veremos como fazer um zoom em imagem com CSS, sem utilizar JavaScript ou alguma lib, vamos de uma forma fácil atingir o objetivo com CSS puro.

zoom com CSS puro capa

A ideia central da técnica é adicionar uma div externa que vai englobar a imagem, e ao ser passado o ponteiro do mouse por cima (hover) ativar o zoom

Então acaba que o HTML deste projeto é bem simples, apenas uma div com uma tag img

E a técnica do zoom é realizada pela propriedade scale do CSS

Além disso, um uso muito comum é nas telas de produto de e-commerce, onde o cliente precisa ver mais detalhes do produto e aí aplica-se o zoom

Zoom com CSS: código HTML

Como mencionei acima o código HTML é bem simples, veja:

<div class="container">
    <img src="garrafa_zoom.jpg">
</div>

Neste caso, temos uma div com class container que vai abrigar a imagem

E também a própria imagem dentro dessa div, que eu chamei de garrafa_zoom.jpg e está na mesma pasta do HTML

Agora vamos ao código CSS

Zoom com CSS: código CSS

Vamos definir um tamanho para o container, adicionar uma margem para descolar das bordas do navegador e também uma borda, para marcar o fim da div

Na imagem vamos definir que a sua largura é 100% do pai, ou seja, a imagem ficará do tamanho do container

Além disso vamos adicionar uma transição para o zoom não ficar tão repentino

E por fim vamos adicionar o pseudo-seletor :hover, para quando o ponteiro do mouse é colocado em cima da imagem ativar o scale

Este scale vai aumentar a imagem, baseado no valor da regra

Veja o código final do CSS:

.container {
  position: relative;
  border: 1px solid #000;
  overflow: hidden;
  width: 400px;
  margin: 100px;
}
.container img {
  max-width: 100%;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.container:hover img {
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

Perceba também que adicionamos -moz- e -webkit-, isso serve para utilizar as funcionalidades nativas dos navegadores para a regra do scale, por exemplo

O -moz- faz essa função para o navegador Firefox e o -webkit- para o Safari e Opera

Então as vezes algumas regras não estão padronizadas ainda nos navegadores, mas sim as funções nativas, então com este recurso você resolve este problema

Dadas as explicações, vamos ver o resultado final

CSS zoom exemplo 1

Aqui a imagem com os estilos básicos e a borda aplicada no container

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

CSS zoom exemplo 2

Aqui temos a imagem após o :hover com o zoom aplicado pela propriedade scale

Assim o zoom em imagem com CSS está pronto!

Conclusão

Vimos neste artigo que aplicar zoom com CSS é bastante fácil

Apenas devemos criar uma div pai, que vai controlar o tamanho da imagem que está dentro da div

Assim aplicamos a regra scale por meio do :hover, e podemos adicionar uma transition na imagem para ter uma transição mais suave da animação

E por hoje é isso, até o próximo post!

Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo 😀

0 0 vote
Article Rating
0
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x