Overlay in CSS

Oggi mi sono trovato a creare un overlay di immagini per un menu html: un’immagine che si sovrappone ad un’altra nel momento in cui il mouse ci andava sopra.

Ho cercato di scrivere meno codice possibile e di fare una cosa il più semplice possibile.

Sono riuscito a scovare un bel paio di esempi che permettono di creare degli overlay in puro css, senza bisogno di Javascript o di altri script troppo particolari.

Il codice html, come ho detto, è il più semplice possibile:

<a ... ><img ... /></a>

E’ ovvio che dentro ci vanno gli attributi del caso, e chi vuole può metterci Classi e/o ID per essere sicuro di bersagliare solo gli elementi che ha preso di mira.

Overlay in CSS n.1

a {
display:inline-block;
background: url('immagine-da-mettere-sopra');
}
a img:hover {
opacity:0.5;
filter:alpha(opacity=50);
}

fonte: http://jsfiddle.net/wesleyterry/jwXvA/

Overlay in CSS n.2

a {
position: relative;
float: left;
cursor: pointer;
}
a:hover:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url('immagine-da-mettere-sopra');
}

fonte: http://www.impressivewebs.com/image-tint-blend-css/

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Ricevi un avviso se ci sono nuovi commenti. Oppure iscriviti senza commentare.

You can add images to your comment by clicking here.