3 fantastici effetti immagine al passaggio del mouse su CSS3
Sul web moderno ci sono numerose tecniche che possono essere utilizzate per creare interazioni interessanti, ma il più semplice ed elegante è solitamente il CSS, e in particolare le aggiunte fornite con CSS3.
Ai vecchi tempi, dovevamo affidarci a JavaScript per questo tipo di effetto, ma grazie al supporto sempre crescente per CSS3 attraverso i browser, ora è possibile impostare effetti come questi senza alcuno script. Ci sono purtroppo ancora i browser (IE9 e successivi) che non supportano CSS3, quindi avrai bisogno di un fallback per i browser legacy o per trattare l'effetto come un miglioramento progressivo.
Oggi esamineremo come applicare effetti di hover fantastici, ma puri per mostrare e nascondere le didascalie delle immagini.
Se preferisci seguire il codice, puoi farlo scarica qui i file.
Demo 1
La prima demo è la nostra più semplice: l'immagine volerà alla sua destra per rivelare la didascalia.
Il markup
Per il nostro secondo codice html, utilizzeremo un markup molto simile alla nostra prima demo. Ma questa volta useremo demo-2 come classe e aggiungeremo la classe zero :
This is a cool title!
Lorem ipsum dolor sit amet.
Il CSS
Il nostro CSS sarà quasi la stessa della prima demo, tranne che questa volta sposteremo la nostra immagine verso il basso impostando la proprietà in basso a -96px. Useremo anche la transizione di CSS3 per creare un effetto uniforme:
.demo-2 {position:relative;width:300px;height:200px;overflow:hidden;float:left;margin-right:20px;background-color:rgba(26,76,110,0.5)}.demo-2 p,.demo-2 h2 {color:#fff;padding:10px;left:-20px;top:20px;position:relative}.demo-2 p {font-family:'Lato';font-size:12px;line-height:18px;margin:0}.demo-2 h2 {font-size:20px;line-height:24px;margin:0;font-family:'Lato'}.effect img {position:absolute;left:0;bottom:0;cursor:pointer;margin:-12px 0;-webkit-transition:bottom .3s ease-in-out;-moz-transition:bottom .3s ease-in-out;-o-transition:bottom .3s ease-in-out;transition:bottom .3s ease-in-out}.effect img.top:hover {bottom:-96px;padding-top:100px}h2.zero,p.zero {margin:0;padding:0}Demo 3
Per la nostra ultima demo, creeremo un effetto di carta inversa. Ciò significa che quando si posiziona il mouse sull'immagine, lo farà ruotare attorno al suo asse per rivelare la descrizione.