• 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?

Ultraszybki serwer VPS NVMe BIZNES
0 głosów
119 wizyt
pytanie zadane 11 stycznia 2017 w HTML i CSS przez BlvckFox Bywalec (2,450 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 2017 przez Comandeer Mentor (385,490 p.)
wybrane 11 stycznia 2017 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ź 39 wizyt
pytanie zadane 12 września 2017 w JavaScript, jQuery, AJAX przez Tomo231 Początkujący (310 p.)
0 głosów
1 odpowiedź 75 wizyt
pytanie zadane 1 kwietnia 2017 w HTML i CSS przez Vorex444 Dyskutant (8,340 p.)
+2 głosów
1 odpowiedź 181 wizyt
pytanie zadane 2 września 2016 w HTML i CSS przez ProgramistaMaciek Początkujący (260 p.)
Porady nie od parady
Zadając pytanie postaraj się o odpowiedni tytuł, kategorię oraz tagi.
Ciekawy innych porad? Odwiedź tę stronę!

44,319 zapytań

84,152 odpowiedzi

167,551 komentarzy

21,225 pasjonatów

Przeglądających: 325
Pasjonatów: 22 Gości: 303

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...