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/