poniżej znajduje się gościnny post Dylana Winn-Browna, który pokazuje nam wydajny sposób na osiągnięcie tego efektu projektowego.

pracując ostatnio nad stroną klienta, zostałem poproszony o powtórzenie takiego efektu.

ten rodzaj efektu jest szczególnie stosowany w sytuacjach typu portfolio, w których projekt ma na celu pokazanie zarówno szczegółów wizualnych, jak i informacyjnych.

istnieje wiele różnych możliwych metod

ponieważ nigdy wcześniej nie stworzyłem takiego efektu, zacząłem przyglądać się różnym sposobom robienia tego i natknąłem się na wiele różnych metod.

jedną z opcji było użycie wtyczki jQuery. Ten nie był do końca taki efekt, jaki chciałem, a na pewno nie bardzo lekki.

inną opcją było umieszczenie <img> w kontenerze i manipulowanie nim za pomocą CSS. Może być kilka potencjalnych korzyści, takich jak możliwość ustawienia źródła za pomocą srcset tak, aby używany obraz był odpowiedni do wydajności i urządzenia.

w mojej sytuacji, chciałem zarządzać efektem całkowicie w CSS, więc poszedłem na to.

podstawowa funkcjonalność

w celu uzyskania optymalnej wydajności, zdecydowałem się wykorzystać właściwość CSStransform do obsługi powiększenia obrazu. (Animacje CSS korzystają z akceleracji sprzętowej i w rezultacie wydają się płynniejsze niż inne metody animacji.)

zamiast <img>, użyłem dodatkowego <div> wewnątrz rodzica, aby działać jako obraz. Struktura jest następująca:

<div class="parent"> <div class="child"></div></div>

najpierw określamy wymiary elementu nadrzędnego. Następnie dziecko może wypełnić rodzica za pomocą width: 100% I height: 100%;, a także ustawić obraz tła, zapewniając skalowanie do pokrycia obszaru.

.parent { width: 400px; height: 300px;}.child { width: 100%; height: 100%; background-color: black; /* fallback color */ background-image: url("images/city.jpg"); background-position: center; background-size: cover;}

następnie dodajemy efekty hover do naszego elementu nadrzędnego, który wpłynie na nasz element podrzędny. Styl ostrości jest również dobry dla dostępności:

.parent:hover .child,.parent:focus .child { transform: scale(1.2);}

możesz użyć narzędzia do dodawania prefiksów, aby uzyskać najlepszą możliwą obsługę przeglądarki.

aby zakończyć podstawowy efekt, możemy dodać kilka przejść do normalnego stanu elementu potomnego:

transition: all .5s;

Jeśli chcesz dodać nakładkę kolorów, możesz użyć pseudo elementów, takich jak ::before:

.child::before { content: ""; display: none; height: 100%; width: 100%; position: absolute; top: 0; left: 0; background-color: rgba(52, 73, 94, 0.75);}.parent:hover .child:before,.parent:focus .child:before { display: block;}

teraz, gdy najedziemy kursorem na element nadrzędny, element podrzędny powinien pokazać nakładkę kolorów!

na koniec omówimy, jak dodać tekst do wyświetlenia na naszej nakładce. Możemy dodać element do naszego aktualnego elementu potomnego w następujący sposób:

<div class="parent"> <div class="child"> <span>Hello</span> </div></div>

możemy dać naszemu <span> jakiś styl:

span { color: white; /* Good thing we set a fallback color! */ font-family: sans-serif; padding: 25%; position: absolute;}

i możemy uczynić go widocznym tylko wtedy, gdy najedziemy kursorem na .parent:

.parent:hover span,.parent:focus span { display: block;}

demo na żywo

Zobacz powiększenie pióra na stronach portfolio Hover – portfolio autorstwa Dylana (@dwinnbrown) na CodePen.

wsparcie mobilne

Jeśli kontenery są linkami, a Stany najechania nie ujawniają żadnych istotnych informacji, możesz po prostu zostawić to w spokoju.