• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

CSS opacity - dlaczego to.. działa?

0 głosów
90 wizyt
pytanie zadane 4 dni temu w HTML i CSS przez użytkownika BlvckFox Obywatel (1,780 punkty)
Witam, chciałem sobie zrobić lekką wersje hover do zdjęć i zrobiłem coś takiego. figcaption, czyli opis ma display: none; i opacity: 1  po najechaniu na img figcaption zmienia się na display block i dodaje opacity 0 (? dlaczego opacity 0 działa)
Czy nie powinno być tak, że początkowo figcaption ma display none i opacity 0 a dopiero po najechaniu zeby wywolac efekt pojawiania sie opacity zmienia sie na 1 ?
+ jak bez dodawania kolejnych divów zrobić, żeby na opacity działało transition podczas gdy kursor już nie najeżdża na obrazek?

Kod: http://codepen.io/FoxCode/pen/apdrWW

1 odpowiedź

+4 głosów
odpowiedź 4 dni temu przez użytkownika Comandeer Ekspert (326,530 punkty)
wybrane 4 dni temu przez użytkownika BlvckFox
 
Najlepsza

Bo figcaption jest przezroczyste tylko wtedy, gdy kursor jest na obrazku. W chwili, gdy dostanie display: block, kursor nie jest już dłużej na obrazku tylko na samym figcaption, stąd jest aplikowane opacity z figure figcaption.

+ jak bez dodawania kolejnych divów zrobić, żeby na opacity działało transition podczas gdy kursor już nie najeżdża na obrazek?

Nie używać nieanimowalnego display tylko pobawić się visibility

Podobne pytania

+2 głosów
1 odpowiedź 151 wizyt
pytanie zadane 2 września 2016 w HTML i CSS przez użytkownika ProgramistaMaciek Początkujący (250 punkty)
+1 głos
1 odpowiedź 110 wizyt
pytanie zadane 20 sierpnia 2016 w HTML i CSS przez użytkownika Mistrz0000000 Obywatel (1,820 punkty)
0 głosów
3 odpowiedzi 87 wizyt
pytanie zadane 4 stycznia w HTML i CSS przez użytkownika Asokus Nowicjusz (200 punkty)
...