• 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
107 wizyt
pytanie zadane 11 stycznia w HTML i CSS przez BlvckFox Obywatel (1,930 p.)
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ź 11 stycznia przez Comandeer Ekspert (346,720 p.)
wybrane 11 stycznia przez 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

0 głosów
1 odpowiedź 67 wizyt
pytanie zadane 1 kwietnia w HTML i CSS przez Vorex444 Gaduła (4,600 p.)
+2 głosów
1 odpowiedź 173 wizyt
pytanie zadane 2 września 2016 w HTML i CSS przez ProgramistaMaciek Początkujący (260 p.)
+1 głos
1 odpowiedź 118 wizyt
pytanie zadane 20 sierpnia 2016 w HTML i CSS przez Mistrz0000000 Bywalec (2,480 p.)
...