Nadanie efektu hover dla diva z tłem w css

pytanie zadane 8 września 2017 w HTML i CSS przez Radek Begej Użytkownik (580 p.)

Witam mam pytanie czy jest opcja nadania efektu hover dla diva którego tło jest zdefiniowane w css.

Czy muszę wykorzystać js bo z nim mi narazie nie podrodze .

Czyli przykładowo :

<div class="nazwa"></div>

---CSS--

.nazwa{

background: ('../floder/obraz.jpg');

}

Chciałbym osiągnąć taki efekt żeby po najechaniu na tego diva (jest to dosyć duży element na stronie ) wyświetliło się przyciemninie z jakimś napisem przyciemnienie około 80% .

1 odpowiedź

odpowiedź 8 września 2017 przez imklau Nałogowiec (42,090 p.)

Masz na myśli to, że po najechaniu na diva z obrazkiem chcesz ten obrazek przyciemnić i dodatkowo jakiś napis dać?
Bo jeśli o to chodzi to bez JS się obejdzie ;)

Napis powinieneś dać w HTML normalnie, ale dodatkowo ukryj go za pomocą CSS (możesz tu wykorzystać overflow: hidden dla rodzica + transform: translate() dla tego napisu żeby go przesunąć poza obszar diva i w momencie najechania przywrócić go do pozycji na divie).
Jeśli chodzi o przyciemnienie to za pomocą :before lub :after możesz to zrobić nadając pseudoelementowi takie same wymiary, jak ma ten Twój div + background ustawić jako rgba() dzięki czemu będzie w jakimś tam stopniu przyciemnione i przezroczyste.

komentarz 8 września 2017 przez Radek Begej Użytkownik (580 p.)

dzięki za odpowiedź :)

1	komentarz 8 września 2017 przez niezalogowany Albo position relative na rodzicu + absolute na dziecku we wrapperze https://codepen.io/anon/pen/ZJdPjp