css - hover animowany obraz

pytanie zadane 22 stycznia 2017 w HTML i CSS przez Kamil Zieliński Nowicjusz (200 p.)

mam pytanie dotyczace cześci hover. nawiazujac do #2 odcina w css chiałbym np najeżdzajac na ikonke snapchata wyświetliła mi sie grafika o tym samym rozmiarze która bedzie wzbogacona o te "kropeczki" identyfikacyjne. jezeli byłoby cos niejasne to podpowiem mniej wiecej o co mi chodzi

1	komentarz 22 stycznia 2017 przez HaKIM Szeryf (87,590 p.) Co to są „kropeczki identyfikacyjne”?

komentarz 22 stycznia 2017 przez Kamil Zieliński Nowicjusz (200 p.)

no jak masz cos takiego a podstawowy obrazek mam z fontello

komentarz 22 stycznia 2017 przez HaKIM Szeryf (87,590 p.)

Zgaduję, że te kropeczki można skanować i wyświetli się profil jednego z użytkowników, tak?

komentarz 22 stycznia 2017 przez Kamil Zieliński Nowicjusz (200 p.)

tak dokładnie

komentarz 22 stycznia 2017 przez Kamil Zieliński Nowicjusz (200 p.)

wiec chce zeby był taki najpierw zwykly duszek jak tutaj https://scr.hu/kkmaWy a po najechaniu zeby sie zmienił border color i obrazek

komentarz 22 stycznia 2017 przez HaKIM Szeryf (87,590 p.)

W takim razie najprostszą opcją będzie odpowiednia stylizacja obrazka aby wyglądał jak reszta ikon i dodania go do zbioru wraz z animacją.

komentarz 22 stycznia 2017 przez Kamil Zieliński Nowicjusz (200 p.)

a jak to zrobic mniej wiecej?

komentarz 22 stycznia 2017 przez HaKIM Szeryf (87,590 p.)

W sumie to wszystko napisałem w poprzednim komentarzu.

Wstawiasz obrazek z „kropeczkami”, do miejsca gdzie znajduje się ikona. Stylizujesz go aby nie różnił się od ikon i w css'ie dodajesz mu odpowiednie animacje, których oczekujesz.

Przyda się go przerobić na grafikę wektorową aby zawsze trzymał fason. :D

Wiesz już o :hover także nie ma większego problemu. Wystarczy pobawić się w stylizowanie.

Jak zrobić wyskakującą grafikę możesz podejrzeć tutaj:

http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

Z dodatkiem Js'a:

http://stackoverflow.com/a/25538564

1 odpowiedź

odpowiedź 22 stycznia 2017 przez ArkadiuszFlorczak Użytkownik (620 p.)
wybrane 22 stycznia 2017 przez Kamil Zieliński

Najlepsza

A może chodziło po prostu o coś takiego ?

#klik {
background-image: url(images/obrazek1.jpg);
}
#klik:hover {
background-image: url(images/obrazek2.jpg);
}