Zrobienie wyciemnienia obrazka po najechaniu na niego myszką jest w dzisiejszych czasach banalnie proste. Wykorzystamy pseudo-selektor :hover oraz właściwość filter z odpowiednio ustawionym brightness. Pamiętajmy też o właściwości transition na animowanym elemencie – nie chcemy, aby efekt zadziałał od razu.
Jak powiedziałem, rzecz jest banalnie prosta. Łapiemy element, który po najechaniu myszą ma zostać wyciemniony:
.post-thumbnail-news:hover {
filter: brightness(80%);
}Oczywiście poziom jasności (u mnie 80%) ustalamy sobie sami, według własnych upodobań. Najlepiej jest odpalić devtoolsy, znaleźć ten brightness, przyciskami strzałek góra/dół sobie dostosowywać i w czasie rzeczywistym oglądać na stronie co jaki efekt daje, aż znajdziemy taką wartość, która nas usatysfakcjonuje.
Teraz tylko transition na animowanym elemencie z odpowiednim opóźnieniem:
.post-thumbnail-news {
transition: all 0.3s;
}Po raz kolejny powiem, że wartość opóźnienia musimy sobie sami ustalić. Najlepiej popróbować w devtoolsach, dobrać właściwą i ją dodać. Jeżeli jednak chcemy – możemy ją zmieniać w pliku CSS, zapisywać, odświeżać stronę, obserwować, zmieniać raz jeszcze. Nie jest to najwydajniejszy sposób pracy, ale jeżeli chcemy – nikt nam nie zabrania.
Swoją drogą, jeżeli mamy liczbę zaczynającą się od zera możemy zastosować zapis skrócony:
.post-thumbnail-news {
transition: all .3s;
}Wspominam o tym, bo kiedyś możemy się z takim zapisem spotkać, więc lepiej, żeby nas nie dziwił.
