Como criar um efeito de zoom de imagem onClick CSS puro

CSS não tem uma pseudoclass para segmentação de eventos de cliques, e isso constitui um dos maiores pontos de dor de desenvolvedores front-end. A pseudo-classe mais próxima é :ativo quais estilos um elemento para o período de tempo que um usuário pressiona o mouse sobre ele.

Este efeito é de curta duração: uma vez que o usuário libera o mouse, :ativo não funciona mais. Precisamos encontrar algum outro caminho para emular o evento click em CSS.

Este post foi escrito em resposta ao pedido de um leitor, e vai explicar como segmentar o evento de clique com CSS puro em um caso de uso específico, zoom de imagem.

Você pode ver o resultado final abaixo - uma solução somente CSS para zoom de imagem ao clicar.

Quando usar a solução somente CSS

Antes de prosseguir, quero dizer que, para zoom de imagem, eu recomendo o método somente CSS (que altera as dimensões da imagem), somente quando você quer um solteiro ou um grupo de poucas imagens ter o recurso de zoom.

Para apropriado galeria, JavaScript oferece mais flexibilidade e eficiência.

Técnicas de front-end que usaremos

Agora que você foi advertido, vamos rapidamente examinar o 3 principais técnicas nós estaremos usando:

1. o Tag HTML que permite que os navegadores criar áreas vinculáveis ​​sobre uma imagem. Leia mais sobre o elemento no meu post anterior.
2. o usemap atributo do tag, que liga a imagem ao mapa da imagem.
3. o :alvo Pseudo-classe CSS que representa um elemento que foi segmentado usando seu seletor de ID.

1. Crie a base do HTML

Primeiro, vamos criar a base HTML. No código abaixo, adicionamos uma imagem a ser ampliada e ampliada E fechar ícones de botão para aumentar e diminuir o zoom.

É importante ter uma ID na imagem a ser ampliada, e o botão Fechar precisa ser um link que tenha o href = "#" atributo, eu vou explicar porque mais tarde no post.

2. Adicione o CSS

Inicialmente, o ícone Fechar não deve ser exibido. o posição, margem-, esquerda, e inferior propriedades Lugar, colocar a Expandir e Fechar ícones onde queremos que eles estejam - no canto superior direito da imagem.

o eventos-ponteiro: nenhum; regra permite eventos do mouse para passar pelo ícone Expandir e alcançar a imagem.

 .img altura: 150px; largura: 200px;  .close background-image: url ("Close-icon.png"); repetição de fundo: sem repetição; inferior: 418px; Mostrar nenhum; altura: 32px; esquerda: 462px; margem superior: -32px; posição: relativa; largura: 32px;  .expand bottom: 125px; margin-left: -32px; margem-direita: 16px; eventos-ponteiro: nenhum; posição: relativa;  

3. Adicione o mapa da imagem

No mapa de imagens, o área clicável deveria estar no canto superior direito da imagem logo abaixo do ícone Expandir e sobre seu tamanho. Coloque o elemento antes do primeiro tag no HTML. Nós vamos ligar a imagem para o mapa na próxima etapa.

No bloco de código acima, o tag define o forma, tamanho e URI de uma área conectável dentro de um mapa de imagens. Para forma retangular, a forma atributo leva o rect valor e quatro valores do coords atributo representam a distância em pixels entre:

1. a borda esquerda da imagem e a borda esquerda da área do link
2. a borda superior da imagem e a borda superior da área do link
3. a borda esquerda da imagem e a borda direita da área do link
4. a borda superior da imagem e a borda inferior da área do link

O valor do href atributo tem que ser o identificador de hash da imagem (é por isso que a imagem deve ter um identidade).

4. Vincule a imagem ao mapa da imagem

Adicione o usemap atributo para a imagem, de modo a ligá-lo ao mapa da imagem. Seu valor precisa ser o representação hash do nome atributo do tag nós adicionamos na etapa 3.

A área clicável do mapa de imagens agora fica atrás do botão Expand. Quando o usuário clica no botão Expandir, é a área clicável que é clicada na realidade - lembre-se de que fizemos o botão "Expandir" “passável” com o eventos-ponteiro: nenhum; regra na etapa 2.

Desta forma, o usuário alveja a própria imagem clicando nele, e após o clique, o URI é sufixado com o "# img1" identificador de fragmento.

5. Estilize o :alvo Pseudoclasse

Até o "# img1" identificador de fragmento é no final do URI, a imagem de destino pode ser estilizado com o :alvo pseudo-classe

As dimensões da imagem de destino aumentam, o botão Fechar é exibido e o botão Expandir fica oculto.

 .img: target height: 450px; largura: 500px;  .img: target + .close display: block;  .img: target + .close + .expand display: nenhum;  

Como o botão Fechar funciona

Como o botão Fechar foi adicionado como imagem de fundo (Passo 2), e é na verdade tag com o href = # atributo (Etapa 1), quando é clicado, ele remove o identificador de fragmento do final do URI. Portanto, também remove o :alvo pseudo-classe da imagem e da imagem volta ao seu tamanho anterior.

Informações básicas: por que e não ?

Até agora, você certamente entende que a coisa mais importante para essa solução somente CSS funcionar é segmentar a imagem usando o href = "# imgid" atributo, o que também poderia ser feito usando o tag em vez do mapa da imagem.

o padrão valor para forma atributo cria um área conectável retangular que cobre toda a imagem. Se você fosse usar em vez disso, você teria que codificá-lo para cobrir a imagem, e você também pode ter que usar um elemento wrapper para o mesmo propósito.

Para suportar navegadores IE antes disso, você pode querer usar ao invés de , ou faça com que a imagem seja ampliada clicando em qualquer lugar nela (nesse caso, não haverá necessidade do ícone Expandir).