Hover w css3

pytanie zadane 8 września 2016 w HTML i CSS przez Madar Obywatel (1,560 p.)

Witam
Piszę projekt w bootstrapie i podczas stylizacji natknąłem się na pewien problem.

https://blackrockdigital.github.io/startbootstrap-agency/

Powyższy link przeniesie Was do strony, którą piszę. Linki w portfolio po najechaniu zmieniaja kolor na żółty i na środku pojawia się plus. Czy ktoś ma pomysł jak to zrobić? Nie da się nadać background color na obrazek, próbowałem.

2 odpowiedzi

odpowiedź 8 września 2016 przez Kornelia Kobiela Nałogowiec (33,340 p.)

Ten obrazek może tam cały czas być, ale pobawić się możesz jego widocznością. W skrócie: gdy mysz nie jest nad elementem żółte tło ma przezroczystość na 100%, gdy najeżdżasz to się zmienia.

komentarz 8 września 2016 przez Madar Obywatel (1,560 p.)

To nie zadziała, gdyż obrazek przysłania kolor :(

komentarz 8 września 2016 przez Kornelia Kobiela Nałogowiec (33,340 p.)

Eee, dlaczego. Tworzysz nowy div, który ustawiasz na tym z pierwotnym obrazkiem. Temu divovi nadajesz tło w kolorze żółtym i jako obrazek tła dajesz +. Oczywiście ikonka musi mieć przezroczyste tło. Później tylko manipulujesz widocznością.

odpowiedź 8 września 2016 przez radek024 Szeryf (77,160 p.)

Dokładnie zbadaj ten snippet - nie jest on wybitnie dobry, ale spełnia swoje zadanie ;)
http://codepen.io/radek024/pen/VKLNwd

komentarz 8 września 2016 przez Madar Obywatel (1,560 p.)

Gdybyś miał chwilkę i wytłumaczył mi co się dzieje w tym kodzie, byłoby cudownie. Dopiero się uczę :(

komentarz 9 września 2016 przez radek024 Szeryf (77,160 p.)

Jest div.checkout, który posiada jakieś tam wymiary. W tym divie jest kolejny div - mieszczący się w tym pierwszym i zajmujący full szerokość oraz wysokość, ale i jakiś obrazek. W środku tego diva jest znowu kolejny - o klasie woop, który posiada wartość opacity: 0 - czyli jest niewidoczny. Dodatkowo w tej klasie ustalone jest, aby treść w dalszych blokach była wyświetlana centralnie w środku elementu. Dalej mamy tekst, który jest dowolnie wystylizowany.

Następnie są style dla klasy checkout, jeżeli mysz będzie nad elementem(:hover) - wtedy dla klasy woop zostanie dodana animacja o nazwie opacityup o długości trwania 3s. Dodatkowo będzie się powtarzała - dzięki właściwości infinite.