Animazioni fantasiose che coinvolgono il passaggio del mouse sulle immagini utilizzate per richiedere JavaScript. Non più! CSS è qui per ravvivare le tue miniature e le tue gallerie.
Gli effetti al passaggio del mouse sull'immagine possono aggiungere un ulteriore livello di rifinitura al tuo sito web. Creano un effetto liscio, rendendo le gallerie di immagini oi caroselli più piacevoli da navigare. La parte migliore è che puoi creare questi effetti solo con CSS e senza JavaScript.
Puoi creare diversi stili di animazione sulle tue immagini. Questi includono la sfocatura o lo zoom dello sfondo, la dissolvenza o lo scorrimento del testo e la modifica del colore di sfondo.
Creazione dell'HTML per le immagini
Inizia creando un file indice.html file all'interno di una cartella vuota sul tuo computer, quindi apri il file con un editor di testo. All'interno del file, crea lo scheletro HTML e aggiungi il seguente markup all'interno del corpo di apertura e dei tag del corpo di chiusura:
<divclasse="griglia">
<divclasse="involucro immagine">
<immclasse="sfocatura"src=" https://picsum.photos/500?random=1"alt=""><divclasse="il contenuto svanisce">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divclasse="involucro immagine">
<immclasse="sfocatura dello zoom"src=" https://picsum.photos/500?random=2"alt=""><divclasse="il contenuto svanisce">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divclasse="involucro immagine">
<immclasse="sfocatura"src=" https://picsum.photos/500?random=3"alt=""><divclasse="contenuto diapositiva a sinistra">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divclasse="involucro immagine">
<immclasse="grigio"src=" https://picsum.photos/500?random=3"alt="">
<divclasse="contenuto diapositiva a sinistra">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
div>
Questo è un contenitore a griglia con quattro wrapper di immagini. Gli elementi div con il wrapper di immagini class funge da wrapper per l'immagine e il testo corrispondente. All'immagine e al contenuto di ciascuna sezione è stato aggiunto un insieme univoco di classi.
All'interno del foglio di stile, lo farai scegliere come target questi elementi con i loro nomi di classe e applicare i vari effetti di stile e animazione. Il testo non verrà visualizzato per impostazione predefinita; lo mostrerai solo quando passi con il mouse sopra il wrapper dell'immagine e l'immagine subirà effetti diversi nel processo.
Aggiunta di CSS di base
Ora che hai creato l'HTML, è il momento di modellarlo con i CSS. Creare un style.css file e collega a questo foglio di stile dal tuo file HTML, all'interno del file sezione:
<collegamentorel="foglio di stile"href="stile.css">Dentro il tuo style.css file, la prima cosa che devi fare è reimpostare il margine sul corpo a zero e impostare un margine inferiore:
corpo {
margine: 0;
margine inferiore: 20rem;
}Successivamente, devi trasformare il contenitore più esterno in a Griglia CSS che puoi utilizzare per disporre gli elementi in due dimensioni. Il codice seguente crea una griglia con tutte le colonne o le righe adatte. La dimensione minima di ogni colonna è 300px e la dimensione massima è 1 frazione del contenitore:
.griglia {
Schermo: griglia;
colonne-modello-griglia: ripetere(auto-fit, minimo Massimo(300px, 1fr));
}Poiché vuoi posizionare il testo rispetto al suo contenitore, devi impostare la posizione relativa al wrapper dell'immagine:
.image-wrapper {
posizione: parente;
traboccare: nascosto;
}
Il prossimo passo è dare uno stile all'immagine. Visualizza l'immagine come elemento di blocco, falla coprire la larghezza dell'intero contenitore e posizionala adattata al centro del suo contenitore:
.image-wrapper > imm {
Schermo: bloccare;
larghezza: 100%;
proporzioni: 1 / 1;
adattamento all'oggetto: copertina;
posizione dell'oggetto: centro;
}
Per quanto riguarda il testo, posizionalo centralmente e dai un colore di sfondo grigio chiaro trasparente:
.image-wrapper > .contenuto {
posizione: assoluto;
inserto: 0;
dimensione del font: 2rem;
imbottitura: 1rem;
sfondo: rgb(255, 255, 255, .4);
Schermo: flettere;
align-elementi: centro;
giustificare il contenuto: centro;
}
Salva il file CSS e apri indice.html nel tuo browser. Dovresti trovare una pagina simile a quella nell'immagine qui sotto.
Impostazione della transizione sulle immagini e sui testi
Ora che hai applicato gli stili di base alle immagini, il passaggio successivo consiste nell'aggiungervi delle animazioni. Inizia aggiungendo una transizione a entrambe le immagini e al testo corrispondente:
.image-wrapper > imm,
.image-wrapper > .contenuto {
transizione: 200SMfacilità d'ingresso;
}
Ciò significa che tutti gli effetti di transizione (ad es. dissolvenza, zoom e sfocatura) dureranno 200 millisecondi e avranno la stessa curva temporale.
Dissolvenza e animazione sfocata
Il primo stile di animazione sta svanendo nel testo. Quando passi con il mouse su un particolare wrapper immagine, il contenuto che ha l'estensione dissolvenza alla classe verrà applicato questo effetto (animazione di dissolvenza in apertura e in chiusura). Puoi ottenere ciò impostando l'opacità su zero e cambiandola in uno quando un mouse passa sopra un particolare wrapper di immagine:
.image-wrapper > .contenuto.dissolvenza {
opacità: 0;
}
.image-wrapper: al passaggio del mouse > .contenuto.dissolvenza {
opacità: 1;
}
Se salvi il file e controlli il tuo browser, vedrai l'animazione in dissolvenza attiva. Ma potresti anche notare che il testo è un po' difficile da leggere (se l'immagine è netta e ha molto contrasto). Ricordiamo che tutte le immagini hanno anche un nome di classe sfocatura. Questo è per sfocare le immagini per aggiungere un contrasto tanto necessario tra loro e il testo:
wrapper di immagini: al passaggio del mouse > imm.sfocatura {
filtro: sfocatura(5px)
}
Ora quando passi con il mouse sopra l'immagine, puoi vedere che si sfocherà. È possibile aumentare il valore dei pixel per rendere la sfocatura più pronunciata sulle immagini, aggiungendo così più contrasto tra essa e il testo.
Aggiunta di altri effetti
Gli altri effetti sono lo scorrimento del testo da sinistra, lo zoom dell'immagine e l'aggiunta della scala di grigi all'immagine. Ecco il codice per ottenere tutti e tre gli effetti:
.image-wrapper > .contenuto.scorri a sinistra {
trasformare: tradurreX(100%)
}.image-wrapper: al passaggio del mouse > .contenuto.scorri a sinistra {
trasformare: tradurreX(0%)
}.image-wrapper: al passaggio del mouse > imm.grigio {
filtro: scala di grigi(1)
}.image-wrapper: al passaggio del mouse > imm.sfocatura {
filtro: sfocatura(5px)
}
.image-wrapper: al passaggio del mouse > imm.Ingrandisci {
trasformare: scala(1.1)
}
Salva il file, quindi vai al tuo browser e passa con il mouse sopra ogni immagine. Dovresti vedere i diversi effetti in azione.
Per completare gli effetti slide-in, puoi creare altri tre wrapper immagine, ciascuno contenente un'immagine e un testo. Ogni pezzo di testo avrebbe il nome della classe scorrere verso l'alto, scorrere verso il basso, O leggermente a destra. Quindi passerai il valore corretto pixel, em o rem, dentro il trasformare() funzione per creare tutti e tre gli effetti.
Griglia CSS e Flexbox
CSS Grid e Flexbox sono due funzionalità che ti consentono di creare fantastici layout per il tuo sito web. Puoi creare praticamente qualsiasi layout desideri con facilità e personalizzare le righe e le colonne secondo i tuoi gusti. Anche le colonne saranno reattive per impostazione predefinita. Imparare quando usarne uno piuttosto che l'altro ti aiuterà a diventare uno sviluppatore CSS al top dell'1%.
