10 bibliotecas CSS para efeitos melhorados de focalização de imagem
Deixar usuários saber com facilidade e clareza qual parte da página da Web é clicável é uma parte importante do design UX. O antigo, mas ouro, jeito de fazer isso era mudar a cor do texto e sublinhar. Hoje em dia, com o CSS, há muitas outras maneiras de entregar efeitos de foco, especialmente em imagens.
Os desenvolvedores podem agora adicionar efeitos de transição ou animação quando um evento de foco é acionado. Estamos olhando para slides direcionais, zooms em velocidades diferentes, fade-ins e fade-outs, efeitos de dobradiça, revelações de holofotes, oscilações, saltos e muito mais.
Nesta compilação, existem mais de 250 efeitos de foco para inspirar você. Você também pode pegar o código na fonte.
Efeitos de focalização de imagem (16 efeitos)
Nesta página você encontrará uma bela coleção de 16 efeitos de imagens com legendas. Pegue o código HTML e CSS de cada efeito passando o mouse sobre as imagens e clicando em Mostrar código.
Animação instantânea de legenda de imagem (4 efeitos)
Aqui estão 4 animações de legenda legal que são executadas quando se passa por cima da imagem. Os efeitos são construídos com transições e transformações CSS3 puras e sem JavaScript, para aumentar a compatibilidade entre navegadores.
iHover (35 efeitos)
iHover é uma colecção de efeitos de focagem powered by CSS3. Existem 20 efeitos de foco no círculo e 15 efeitos de foco quadrado. Para usar os efeitos, você precisará escrever alguma marcação HTML e incluir os arquivos CSS.
Image Hover (44 efeitos)
Esta biblioteca contém 44 efeitos feitos com CSS puro. Alguns dos efeitos incluem desvanece-se, empurra, desliza, dobradiças, revela, faz zoom, borrões, aletas, dobras e persianas, em múltiplas direções. Há uma versão estendida de 216 efeitos que podem ser comprados por € 14.
Ideias do efeito de passarinho (30 efeitos)
Esta demonstração do hover de imagens feita pelo Codrop, te dá inspiração quando você faz transições suaves entre as imagens e suas legendas. Há um total de 30 efeitos em dois conjuntos com tutoriais e o código-fonte.
Passe o CSS (108 efeitos)
Hover CSS permite adicionar efeitos de foco a qualquer elemento, como um botão, link ou imagem. Os efeitos incluem transições 2D, transições de fundo, bordas, transições Shadow e Glow e muito mais. A biblioteca está disponível em CSS, Sass e LESS.
Animação (Mais de 100 efeitos)
Há mais de 100 animações de foco de imagem em botões, sobreposições, detalhes, legendas, imagens e botões de mídia social. Todos os efeitos são alimentados por CSS3.
Efeito de foco de legenda (7 efeitos)
Existem 7 vários efeitos nesta coleção. Todas as transições parecem muito legais e suaves. Vá para a seção tutorial para aprender como aplicar esses efeitos em seu projeto.
Efeitos de foco de imagem CSS (15 efeitos)
Uma coleção de efeitos de foco simples, como zoom, slide, girar, escala de cinza, desfoque, opacidade e outros efeitos básicos. Você pode usar esses efeitos adicionando a classe CSS antes do seu figura tag.
Efeito de foco 3D com reconhecimento de direção
Este é um efeito hover super legal que irá detectar o seu último movimento do mouse. As legendas da imagem serão abertas a partir de uma das quatro direções com base na sua última posição do cursor.
Animação instantânea
Aqui está uma animação de contorno de borda inspirada em UNIQLO. Em um evento de foco, a borda da imagem ficará animada.
Azulejos com Hover Animado
Um para projetos de azulejos, este apresenta zoom lento, slides, pop-ins, sobreposição de luz entre outros.
Efeito de foco do clipe de caminho SVG
Um efeito de focagem de imagem de raio x super incrível alimentado por SVG caminho de clip e transições CSS. Funciona bem no Chrome, Opera e Safari.
