10 librerie CSS per migliori effetti al passaggio del mouse sull'immagine
Lasciando gli utenti facilmente e chiaramente sapere quale parte della pagina web è cliccabile è una parte importante del design UX. Il vecchio ma prezioso modo di farlo era cambiare il colore del testo e sottolinearlo. Oggigiorno, con i CSS, ci sono molti altri modi per fornire effetti al passaggio del mouse, in particolare alle immagini.
Gli sviluppatori possono ora aggiungi effetti di transizione o animazione quando viene attivato un evento di hover. Stiamo guardando diapositive direzionali, zoom a diverse velocità, fade-in e fade-out, effetti di cerniera, rivela spotlight, traballa, rimbalza e altro.
In questa compilation, ci sono più di 250 effetti hover per ispirarti. Puoi anche ritirare il codice alla fonte.
Effetti al passaggio del mouse sull'immagine (16 effetti)
In questa pagina troverai una bella raccolta di 16 effetti di immagini al passaggio del mouse con didascalie. Prendi il codice HTML e CSS per ciascun effetto passando con il mouse sopra le immagini, quindi facendo clic Mostra codice.
Animazione al passaggio del mouse sull'immagine (4 effetti)
Ecco 4 fantastiche animazioni di didascalie che vengono eseguite quando si sorvola l'immagine. Gli effetti sono costruiti con transizioni e trasformazioni CSS3 pure, e senza JavaScript, per aumentare la compatibilità tra i browser.
iHover (35 effetti)
iHover è una raccolta di effetti hover alimentati da CSS3. Ci sono 20 effetti hover cerchio e 15 effetti quadrati hover. Per usare gli effetti, dovrai scrivere del codice HTML e includere i file CSS.
Hover dell'immagine (44 effetti)
Questa libreria contiene 44 effetti realizzati con puro CSS. Alcuni degli effetti includono dissolvenze, spinte, diapositive, cerniere, rivelazioni, zoom, sfocature, salti mortali, pieghe e imposte, in più direzioni. Esiste una versione estesa di 216 effetti che possono essere acquistati a € 14.
Hover Effect Ideas (30 effetti)
Questa demo di immagini hover realizzata da Codrop, ti dà l'ispirazione quando fai delle transizioni fluide tra le immagini e le didascalie. Ci sono un totale di 30 effetti su due set con tutorial e il codice sorgente.
Hover CSS (108 effetti)
Hover CSS ti consente di aggiungere effetti al passaggio del mouse su qualsiasi elemento, ad esempio un pulsante, un collegamento o un'immagine. Gli effetti includono transizioni 2D, transizioni di sfondo, transizioni di bordi, ombre e bagliori e altro ancora. La libreria è disponibile in CSS, Sass e LESS.
Animatism (Oltre 100 effetti)
Ci sono più di 100 animazioni al passaggio del mouse su pulsanti, sovrapposizioni, dettagli, didascalie, immagini e pulsanti dei social media. Tutti gli effetti sono alimentati da CSS3.
Effetto al passaggio del mouse (7 effetti)
Ci sono 7 diversi effetti in questa raccolta. Tutte le transizioni sembrano davvero belle e fluide. Vai alla sezione tutorial per imparare come applicare questi effetti sul tuo progetto.
Effetti immagine al passaggio del mouse su CSS (15 effetti)
Una raccolta di semplici effetti al passaggio del mouse come zoom, scorrimento, rotazione, scala di grigi, sfocatura, opacità e altri effetti di base. Puoi usare questi effetti aggiungendo la classe CSS prima del tuo figura etichetta.
Effetto hover 3D sensibile alla direzione
Questo è un effetto hover super cool che rileverà il tuo ultimo movimento del mouse. Le didascalie delle immagini si apriranno da una delle quattro direzioni in base all'ultima posizione del cursore.
Hover Animation
Ecco un'animazione border hover ispirata a UNIQLO. In caso di hover, il bordo dell'immagine verrà animato.
Piastrelle con Hover animato
Uno per i disegni di piastrelle, questo presenta zoom lento, diapositive, pop-in, sovrapposizioni sfumate tra gli altri.
Effetto Hover clip-Path SVG
Un effetto di hover di immagini di faretti a raggi x incredibili realizzato da SVG clip-percorso e transizioni CSS. Funziona bene su Chrome, Opera e Safari.
