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.

You can add images to your comment by clicking here.