Hai bisogno di un effetto hover cool per qualcosa sul tuo sito? Non guardare oltre! Abbiamo creato diversi esempi personalizzati che puoi visualizzare dal vivo come fonte di ispirazione.
Se ti piace l'effetto, rubalo! Abbiamo preparato il CSS e aspettiamo che tu lo copi.
Porta il tuo sito noioso alla vita
Gli effetti al passaggio del mouse possono rendere il tuo sito molto più dinamico e vivo. Prima era necessario che JavaScript facesse qualcosa di veramente interessante con un effetto hover, ma al giorno d'oggi CSS3 è in grado di fare un sacco di cose davvero interessanti se ne stai creando abbastanza.
Gli effetti che useremo oggi utilizzano tutti il codice supportato dai browser moderni, il che significa, per la maggior parte, Mozilla e Webkit. Il supporto di IE è alquanto imprevedibile tra le varie versioni, quindi assicurati di testare accuratamente la tua implementazione. I fantastici effetti al passaggio del mouse sono una di quelle cose che di solito puoi degradare in modo discreto, in modo che i browser più vecchi vedano ancora dei cambiamenti.
Lievitare
Dimostrazione dal vivo: Clicca qui per lanciare
Funziona meglio quando hai una serie di elementi orizzontali. In questo modo quando passi il mouse su di loro ottieni un buon effetto onda.
Questo è super facile da implementare e ci sono in effetti diversi modi per farlo. Quello che ho fatto qui sotto è solo applicare un margine per ogni immagine e quindi ridurre quel margine al passaggio del mouse. Il margine inizia a 15px, quindi si riduce a solo 2px al passaggio del mouse, il che fa salire l'immagine. Si potrebbe facilmente utilizzare lo stesso effetto sugli elementi di testo se fossero in un elenco.
La transizione qui è completamente opzionale in quanto l'effetto funziona ancora abbastanza bene senza di esso. Solo per renderlo un po 'più agevole, anche se ho gettato una rapida animazione impostata per facilitare l'uscita, il che mi è sembrato l'effetto migliore per questo particolare argomento.
Bump Up CSS
Impila e coltiva
Dimostrazione dal vivo: Clicca qui per lanciare
Per questo ho voluto una sorta di effetto lampada lava in modo che quando si sposta il mouse verso il basso l'elenco, ogni immagine si espande lentamente e quindi torna alla sua dimensione originale.
Per fare ciò, ho inserito una pila di immagini larghe 400 px per un'altezza di 133 px. Ho poi ridimensionato quelle immagini a 300px per 100px nel CSS e espanso su hover. Dato che avevo un allineamento al centro, la nuova dimensione dell'immagine ha eliminato il mio allineamento, un margine negativo impostato a metà della dimensione della crescita nella larghezza ha risolto questo problema.
Impila e coltiva i CSS
Dissolvi testo in
Dimostrazione dal vivo: Clicca qui per lanciare
Per questo ho voluto creare un evento simile a JavaScript in cui puoi passare con il mouse su un elemento e vedere un effetto su un altro. Quello che ho fatto per realizzare questo è quello di gettare un po 'di testo e un'immagine in un div e poi spostare tutto a sinistra in modo che il testo sia in linea con l'immagine. Successivamente, ho applicato colore: trasparente e altezza della linea: 0 px al div. Questo posiziona il testo nella parte superiore del div e lo nasconde.
Per far apparire il testo al passaggio del mouse, ho semplicemente cambiato il colore e l'altezza della linea. Quando si passa il mouse sull'immagine, il testo ingrandisce la vista! È un trucco abbastanza carino considerando che è tutto CSS.
Dissolvenza di testo in CSS
Foto storta
Dimostrazione dal vivo: Clicca qui per lanciare
Questo è super semplice ma è un grande effetto per una galleria di miniature. La premessa di base è creare una griglia di immagini e quindi impostare le immagini da ruotare quando si passa sopra di esse, creando l'illusione di una foto storta appesa a un muro.
In questo caso useremo molti nuovi CSS specifici per browser, quindi potresti voler aggiungere qualcosa anche per i browser più vecchi. La nostra galleria userà box-shadows (opzionale), transizioni e trasformazioni per ottenere l'effetto desiderato. La trasformazione gestirà la rotazione e la transizione lo renderà piacevole e scorrevole.
Per fare ancora di più questo, potresti usare pseudo-selettori per far inclinare le immagini in direzioni diverse.
CSS foto storto
Dissolvenza in entrata e riflessione
Dimostrazione dal vivo: Clicca qui per lanciare
Questo è piuttosto complicato, quindi ho dovuto lottare un po 'prima di inventare un effetto che mi piaceva. Lo stato predefinito dell'immagine è un'opacità leggermente ridotta.Quindi, quando si passa con il mouse su di esso, l'opacità si avvia a pieno, viene visualizzato un bagliore attorno ai bordi e viene visualizzato un riflesso (solo Webkit).
Sfortunatamente, il riflesso non è qualcosa che risponde a una transizione, quindi è in una sorta di pop subito quando il resto si attenua, ma è comunque una transizione generale piuttosto bella.
Se sei confuso su come funzionano i riflessi CSS, puoi leggere tutto su di loro in un grande articolo di David Walsh.
Fade In e Reflect CSS
Conclusione
Questi cinque esempi dovrebbero essere sufficienti per ispirarti a creare i tuoi fantastici effetti di hover CSS. Ricordati di sperimentare con questi, combinarli e aggiungere il tuo talento per renderli più interessanti.
Se hai individuato effetti cool hover sul Web, vogliamo vederli! Lascia un commento qui sotto e link a una pagina con un esempio.