Vuoi aggiungere un tocco di dinamicità alle immagini del tuo sito web con HTML e CSS? Un effetto molto utilizzato è quello di rendere un'immagine in bianco e nero per poi riportarla a colori quando l'utente passa il mouse sopra di essa (hover). Questo semplice ma efficace effetto visivo attira l'attenzione e migliora l'esperienza utente, aggiungendo interattività senza appesantire il sito.
Creazione effetto bianco e nero su immagini al passaggio del mouse con HTML e CSS
In questo tutorial vedremo come applicare un filtro in bianco e nero alle immagini utilizzando CSS e farle tornare a colori al passaggio del mouse con un'animazione fluida. Ti guideremo passo dopo passo con codice chiaro e facilmente implementabile, in modo che tu possa replicare questo effetto su qualsiasi sito web in pochi minuti.
I filtri CSS per le immagini
I filtri CSS offrono un modo semplice ed efficace per modificare l'aspetto delle immagini direttamente dal codice, senza bisogno di software di editing. Grazie alla proprietà filter, possiamo applicare effetti come sfocatura, contrasto, saturazione e scala di grigi per trasformare le immagini dinamicamente. In questo tutorial utilizzeremo il filtro grayscale(100%) per rendere un'immagine in bianco e nero e lo rimuoveremo al passaggio del mouse. Il tutto creando un'animazione fluida e accattivante. Nel prossimo paragrafo verrà introdotto il linguaggio CSS con le proprietà necessarie per la realizzazione di questo risultato.
Cosa serve per realizzare questo effetto?
Per realizzare questo effetto utilizzeremo HTML e CSS, due linguaggi fondamentali per la creazione di pagine web. HTML ci servirà per strutturare la pagina e inserire le immagini. CSS ci permetterà di applicare il filtro in bianco e nero e creare l'effetto di transizione al passaggio del mouse. Grazie alla potenza dei filtri CSS, potremo ottenere un risultato elegante senza dover ricorrere a JavaScript o a software di grafica. Di seguito il codice necessario per implementare questa tecnica.
Il codice HTML
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Immagine con effetto bianco e nero</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="title-container">
<h1>Dai vita all'immagine!</h1>
</div>
<div class="image-container">
<img src="esempio.jpg" alt="Immagine esempio">
</div>
</body>
</html>Nel file HTML vengono creati due semplici div. Il primo che conterrà il titolo da inserire appena prima dell'immagine. Il secondo conterrà l'immagine su cui applicheremo il filtro. Quest'ultima viene aggiunta alla pagina tramite l'elemento </img> che contiene l'URL con il percorso in cui si trova l'immagine in locale.
Il codice HTML appena mostrato lascia poi spazio alla personalizzazione. Grazie alla flessibilità del linguaggio, infatti, è possibile aggiungere elementi extra alla pagina oltre al titolo e all'immagine.
Il codice CSS
Di seguito viene mostrato il codice CSS che si occupa di stilizzare la pagina curandone il layout. In questo esempio ciò avviene applicando il filtro in bianco e nero e rimuovendolo quando il mouse passa sopra l'immagine.
/* Stili di base per il contenitore del titolo */
.title-container {
display: block;
}
.title-container h1 {
font-family: sans-serif;
font-size: 26px;
}
/* Stili di base per il contenitore dell'immagine */
.image-container {
display: inline-block;
overflow: hidden;
border-radius: 10px;
}
/* Applicazione del filtro in bianco e nero */
.image-container img {
display: block;
width: 100%;
height: auto;
filter: grayscale(100%);
transition: filter 0.5s ease-in-out;
}
/* Al passaggio del mouse, l'immagine torna a colori */
.image-container img:hover {
filter: grayscale(0%);
}Innanzitutto viene introdotta la classe dedicata al contenitore con il titolo, ovvero il tag </h1>, di cui viene gestita la grandezza del font e il suo posizionamento.
Si passa quindi alla personalizzazione del contenitore con al suo interno l'immagine. Esso aiuta a mantenerla ben posizionata e può avere uno stile personalizzato, come un bordo arrotondato (grazie alla proprietà border-radius).
Poi viene applicato il filtro all'immagine. Quest'ultima avrà una larghezza pari al 100% dello spazio a sua disposizione ed un'altezza automatica che si adatta al contenitore padre. Inoltre, tramite la proprietà filter precedentemente annunciata viene aggiunto il filtro grayscale(100%) che si occupa di trasformare l'immagine in bianco e nero. La transizione (transition: filter 0.5s ease-in-out;) permette un passaggio fluido tra bianco e nero e colori.
Infine, l'ultima voce del codice CSS, ovvero .image-container img:hover: che agisce quando il mouse passa sopra l'immagine. Il filtro viene rimosso (grayscale(0%)) restituendo i colori originali.
Conclusioni
La realizzazione dell'effetto sull'immagine è completa. Di seguito viene mostrato il risultato finale che si otterrà applicando la combinazione di codice HTML e CSS appena descritti.
Abbiamo visto come creare un effetto accattivante per le immagini all'interno di una pagina web. In particolare l'effetto che trasforma in bianco e nero l'immagine per poi riportarla a colori al passaggio del mouse, il tutto utilizzando solo HTML e CSS. Grazie ai filtri CSS, e alle transizioni fluide, è possibile rendere le immagini più dinamiche senza bisogno di JavaScript.
Questo effetto è ideale per migliorare il design di gallerie fotografiche, portfolio, e-commerce o qualsiasi sito che voglia offrire un'esperienza utente più coinvolgente. Una volta imparata la tecnica di base è possibile personalizzarla cambiando la durata della transizione, i colori, l'animazione o aggiungendo testo interattivo.
