Przyciemnianie diva ze zdjęciem po najechaniu kursorem.

Question

Witam, dzisiaj racze podzielić się nastęmpującym problemem.

Mam diva który jest okodowany jako "kafelek1" i jest na nim wstawione zdjęcie + webfont itp, ja natomiast chciałbym aby po najechaniu na niego kursorem przyciemniał lekko, próbowałem już zapisu w css:

.kafelek1:hover

{

    background-color: #kolor;

}

ale on nie działa, jakieś sugestie może co można by było zrobić jeszcze ? albo może źle wpisuję. 

Answer 1

Musisz nałożyć drugiego diva który przykryje kolorem kafelki albo dać pod kafelki drugiego z czarnym tłem i nadać im opacity

Nałożenie diva z kolorem

https://jsfiddle.net/Lh32n51g/8/

Opacity z czarnym tłem

https://jsfiddle.net/Lh32n51g/4/

Answer 2

Możesz wykorzystać do tego właściwość filter: brightness();

Praktyczny przykład ze zdjęciem.

Ale można też nakładać na div