Pojawiający się obrazek po najechaniu kursorem [CSS]

Kategoria wpisu PHP, HTML, CSS Tagi: , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Tym razem pokażę wam jak w bardzo prosty sposób uzyskać efekt obrazka pojawiającego się po najechaniu kursorem myszy na link. Jest więc to kolejny efekt z serii :hover.

Prosty efekt pojawiającego się obrazka z pomocą CSS

Do stworzenia tego efektu poza wiedzą na temat tego jak działa :hover niezbędna będzie również znajomość pseudo elementów CSS. No dobrze jeśli jesteście gotowi przystępujemy do budowy efektu.

Budowę zacznę od utworzenia zwykłego linka, na który następnie nałożę efekt z obrazkiem. I tak:

incididunt ut labore

Jak widać w HTML to zwykły link z pewną klasą. Swoje właściwości zyskuje dzięki:

Może teraz trochę objaśnień:

Właściwie jeśli przeczytaliście wpisy, które podlinkowałam wcześniej to ich nie potrzebujecie. Praktycznie nie wprowadziłam nic nowego – ten efekt to dość ciekawe zastosowanie podstawowych elementów. Zachęcam więc do lektury.

A tak to wygląda w tekście.

 

See the Pen
show img
by Aura (@Julka85)
on CodePen.

Analogiczny efekt można uzyskać z pomocą JavaScript lub jQuery. Jeśli wyrazicie zainteresowanie mogę przygotować również i taką wersję.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *