CSS hover/podswietlenie

Question

Witam, mógłby ktoś podać jakiś pomysł jak rozwiązać sprawę tego hoveru. Jeśli najeżdzam na zdjęcie potrzebuje, aby na dole wyświetlał się pasek jak jest, a na nim tekst - trochę chaos w kodzie zrobiłem - nie mam pomysłu jak to inaczej rozwiązać. + jeśli najeżdzam na prostokąt - obojętne, gdzie to wyświetla się pasek z tekstem.

www.emil.xaa.pl/realizacje.php

Comments

To powinno pomóc

Style child element when hover on parent

Answer 1

https://stackoverflow.com/questions/14263594/how-to-show-text-on-image-when-hovering

https://codepen.io/ArnaudBalland/pen/vGZKLr

http://css-workshop.com/hover-box-text-over-images-on-hover-and-more/

Tutaj masz kilka fajnych propozycji

Powodzenia

Answer 2

Zrobiłem poprzez ::before ::after ,ale dalej nie wyświetla sie, gdy najade na prostokat.

Comments

Update: naprawione... Poprzedni div nie miał wysokości, ani szerokości i przez to nie widział całego prostokątu tylko, kiedy się najeżdzało na pasek + napis się wyświetlało ...

---

Na Twoim miejscu, tej informacji nie wrzucałbym do ::after

.text_realizacje_podklad::after {
    content: 'Wykonano dla TOBEX';
    . . .
}

tego typu informacje lepiej "trzymać" w html-u

    <a href="/tobex">
      <div class="blok_realizacje realizacje_1">      
        <div class="text_realizacje">Wykonano dla TOBEX</div> 
      </div>
    </a>

 

Answer 3

Z podanego linka w komentarzu jaki Tobie podałem

skorzystaj z tej wskazówki 

w Twoim kodzie znacznik <a> "otula" div-a blok_realizacje_1, więc można założyć, że to jest Twój .parent z przykładu powyżej. Propozycja on-line.

Comments

Dzięki, już naprawiłem, główny div nie miał wysokości, ani szerokości w tym był problem.

Pozdrawiam