o seguinte é um post convidado de Dylan Winn-Brown, que nos mostra uma maneira performante de realizar este efeito de design.

ao trabalhar recentemente no site de um cliente, pediram-me para replicar um efeito como este.

este tipo de efeito é notavelmente utilizado em situações do Tipo Carteira em que o desenho pretende mostrar detalhes visuais e informativos.

existem muitos métodos possíveis diferentes

como eu nunca tinha criado um efeito como este antes, eu comecei a dar uma olhada em diferentes maneiras de fazer isso e deparei-me com uma série de métodos diferentes.

uma opção era usar um Plugin jQuery. Este não foi bem o efeito que eu queria, e certamente não muito leve.

outra opção era posicionar um <img> dentro do recipiente e manipulá-lo com CSS. Pode haver alguns benefícios potenciais aqui, como ser capaz de definir a fonte com srcset de modo que a imagem usada é performance e dispositivo-apropriado. na minha situação, eu queria gerenciar o efeito inteiramente na CSS, então eu fui para isso.

funcionalidade básica

a fim de alcançar o melhor desempenho, decidi usar a propriedade CSStransform para lidar com a ampliação da imagem. (CSS animations benefit from hardware acceleration and as a result appear smoother than other methods of animating.)

ao invés de um <img>, eu usei um adicional<div> dentro do pai para atuar como a imagem. A estrutura é:

<div class="parent"> <div class="child"></div></div>

primeiro especificamos as dimensões do elemento-mãe. Em seguida, a criança pode preencher o pai usando width: 100% e height: 100%;, bem como definir a imagem de fundo, garantindo que escalas para cobrir a área.

.parent { width: 400px; height: 300px;}.child { width: 100%; height: 100%; background-color: black; /* fallback color */ background-image: url("images/city.jpg"); background-position: center; background-size: cover;}

em seguida, adicionamos efeitos de hover ao nosso elemento-mãe que irão afectar o nosso elemento-filho. Um estilo de foco é bom para a acessibilidade também:

.parent:hover .child,.parent:focus .child { transform: scale(1.2);}

você pode querer usar uma ferramenta para adicionar prefixos para o melhor suporte possível do navegador.

Para terminar o efeito de base, podemos adicionar algumas transições para o nosso filho elemento normal do estado:

transition: all .5s;

Se você deseja adicionar uma sobreposição de cores, você pode fazer uso de pseudo-elementos, como ::before:

.child::before { content: ""; display: none; height: 100%; width: 100%; position: absolute; top: 0; left: 0; background-color: rgba(52, 73, 94, 0.75);}.parent:hover .child:before,.parent:focus .child:before { display: block;}

Agora, quando sobrevoamos o elemento-mãe, o elemento-filho deverá mostrar uma sobreposição de cores!

finalmente, vamos cobrir como adicionar algum texto para mostrar em nossa sobreposição. Podemos adicionar um elemento à elemento da criança, como por exemplo:

<div class="parent"> <div class="child"> <span>Hello</span> </div></div>

podemos dar o nosso <span> estilo:

span { color: white; /* Good thing we set a fallback color! */ font-family: sans-serif; padding: 25%; position: absolute;}

e podemos torná-lo visível apenas quando passar o mouse sobre o .parent:

.parent:hover span,.parent:focus span { display: block;}

Live Demo

ver a imagem da caneta zoom nos sites da carteira hover por Dylan (@dwinnbrown) no CodePen.

suporte móvel

Se os recipientes são links e os estados de hover não revelam qualquer informação essencial, você pode simplesmente deixá-lo em paz.