Kilka rzeczy w CSS/HTMl?

pytanie zadane 26 września 2015 w HTML i CSS przez Sensej Użytkownik (540 p.)

Hey. Mam pytanie jak uzyskać taki efekt jak na tej stronie. http://dabarti.com/portfolio/

Chodzi mi o to, że po najechaniu na obrazek zmienia się kolor, który jest lekko przeźroczysty i napis. Próbowałem używać hover ale działa.

Druga rzecz to na stronie głównej tej strony przy przewijaniu w dół zwija się jakby ta galeria na samej górze. Próbowałem lecz nie mogę uzyskać takiego efektu.

3 odpowiedzi

odpowiedź 26 września 2015 przez testerius Pasjonat (23,960 p.)
wybrane 26 września 2015 przez Sensej

Najlepsza

Kiedyś zrobiłem taki thumbnail w podobnym temacie, tutaj demo.

komentarz 26 września 2015 przez Sensej Użytkownik (540 p.)

Dzięki wielkie. Teraz wszystko działa.

odpowiedź 26 września 2015 przez Schizohatter Nałogowiec (39,600 p.)

Odpowiedź na pytanie pierwsze:

Na :hover dorzuć element :before (lub :after) o takich samych wymiarach, jak obrazek, a następnie nadaj mu tło w kolorze rgba() - w tym trybie możesz nadać kolor przezroczysty. Czyli: element:hover:before {}

Zawsze możesz zrobić coś w stylu (lepsze rozwiązanie, jeśli masz też tekst jakiś na tym)

<div>
<img>
<p>Tekst</p>
</div>

I domyślnie <p> jest ukryte (display: none), ale po zrobieniu :hover na div pokazuje się (display: block). Np. div:hover p { display: block; }. I ponownie - kolor rgba. Szczegóły użycia doczytasz w Google.

Co do drugiego pytania: poszukaj w Google czegoś pod hasłem "sticky menu" lub "js sticky menu"

I na przyszłość: możesz przecież zajrzeć w kod strony, którą podałeś :) Nie wiem, którego rozwiązania użył autor, ale moje propozycje na pewno się sprawdzą.

komentarz 26 września 2015 przez Czort Nałogowiec (32,500 p.)

Może lepiej, że nie zaglądał do kodu. Ja zajrzałem i żałuję

komentarz 26 września 2015 przez event15 Szeryf (93,790 p.)

Nie wiem czy dobrze pamiętam, ale chyba lepiej jest używać visibility zamiast display:none

komentarz 26 września 2015 przez Schizohatter Nałogowiec (39,600 p.)

@event15, zależy od sytuacji. Ty prawdopobnie mówisz o SEO i Google (które rzekomo ignoruje treść elementów z display: none, chociaż specem od SEO nie jestem). W tym przypadku będziemy element pozycjonować prawdopodobnie absolutnie, więc możemy sobie pozwolić na visibility: hidden;, ponieważ i tak element będzie wyłączony z obiegu strony i nie będzie przesuwał innych.

Ja bym użył display: none; ponieważ jest to faktyczne wyłączenie elementu, a nie tylko jego nie wyświetlenie. <img> z poprawnym "alt" powinno obronić się samo, tak więc można użyć display: none.