Efeito hover com imagens em links

Vários efeitos hover em links que mostram imagens de maneira animada

Hoje vou compartilhar com você um experimento de efeitos hover em links. A ideia é revelar uma imagem em miniatura com um efeito animado ao passar o mouse em cima de um link.

Veja a demo clicando aqui.

A inspiração pra essa ideia veio da animação vista no site da Fuge, onde é claro, uma imagem abre ao passar pelos links. Os outros efeitos foram inspirados no portfólio do Louis Ansa (se você não conhece ainda o trabalho dele, sugiro que comece) e no post da Zhenya Rynzhuk no Dribbble.

As animações foram feitas usando o TweenMax.

Atenção: Saiba que esse efeito usa propriedades de CSS moderno que pode não ser suportado em navegadores antigos — isso mesmo, tchau Internet Explorer.

Veja alguns dos efeitos hover em links:

Espero que esse experimento possar agregar no seu estudo de CSS. Use, personalize, compartilhe.

Caso tenha gostado agradeça a Mary Lou, ela que disponibilizou esse experimento supimpa pra nós. Você pode ver o projeto original aqui (em inglês).

Clique aqui para baixar os arquivos usados neste experimento.

Após anos de experiência em criação web, resolvi compartilhar dicas sobre a carreira em uma agência de desenvolvimento. — https://studioromes.com

Após anos de experiência em criação web, resolvi compartilhar dicas sobre a carreira em uma agência de desenvolvimento. — https://studioromes.com