Nadanie efektu hover dla diva z tłem w css

Question

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% .

Answer 1

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.

Comments

dzięki za odpowiedź :)

---

Albo position relative na rodzicu + absolute na dziecku we wrapperze https://codepen.io/anon/pen/ZJdPjp