Jak sprawić, by obrazy zanikały po najechaniu myszką w WordPress (proste i łatwe)

Czy kiedykolwiek chciałeś dodać odrobinę blasku do obrazów na swojej stronie internetowej? Mówimy o małym, profesjonalnym akcencie, który sprawia, że Twoja strona wydaje się bardziej interaktywna, nie będąc rozpraszającą.

W WPBeginner stwierdziliśmy, że prosty efekt zanikania przy najechaniu myszką jest idealnym rozwiązaniem. Jest to subtelna animacja, która delikatnie zachęca odwiedzających do interakcji z Twoimi treściami wizualnymi.

Ta niewielka zmiana może znacząco wpłynąć na ogólne wrażenie Twojej witryny i jest zaskakująco łatwa do wdrożenia. Nie musisz być ekspertem od kodowania, aby to zrobić.

W tym przewodniku pokażemy Ci dokładnie, jak dodać efekt zanikania obrazu po najechaniu myszką w WordPressie.

Dlaczego warto stosować zanikanie obrazów przy najechaniu myszką w WordPress?

Animacje to łatwy sposób na uatrakcyjnienie Twojej strony internetowej, a nawet mogą przyciągnąć uwagę odwiedzającego do najważniejszych treści na Twojej stronie, takich jak logo Twojej strony lub wezwanie do działania.

Istnieje wiele różnych sposobów na używanie animacji CSS w WordPress, ale dodanie efektu najechania myszką na obrazy jest szczególnie skuteczne. Animacja zanikania oznacza, że Twoje obrazy będą powoli pojawiać się lub znikać, gdy odwiedzający najedzie na nie kursorem.

Zachęca to ludzi do interakcji z Twoimi obrazami i może nawet dodać element opowiadania do strony. Na przykład, różne obrazy mogą pojawiać się i znikać, gdy odwiedzający porusza się po stronie.

W przeciwieństwie do niektórych innych animacji, efekt zanikania obrazu przy najechaniu myszką jest subtelny, więc nie wpłynie negatywnie na doświadczenie czytania odwiedzającego ani na optymalizację obrazów, którą przeprowadziłeś.

Mając to na uwadze, pokażemy Ci, jak dodać efekt zanikania do Twoich obrazów po najechaniu myszką w WordPress. Po prostu skorzystaj z poniższych szybkich linków, aby przejść bezpośrednio do metody, której chcesz użyć:

• Metoda 1: Dodawanie zanikania obrazu przy najechaniu myszką do wszystkich obrazów WordPress
• Metoda 2: Dodawanie animacji zanikania obrazu do poszczególnych stron
• Metoda 3: Dodawanie animacji zanikania obrazów do obrazów wyróżnionych
• Najczęściej zadawane pytania (FAQ)
• Dodatkowe zasoby dotyczące efektów i zarządzania obrazami &

Metoda 1: Dodawanie zanikania obrazu przy najechaniu myszką do wszystkich obrazów WordPress

Najprostszym sposobem na dodanie efektu zanikania do wszystkich Twoich obrazów jest użycie darmowego pluginu WPCode. Jest to najpotężniejszy i przyjazny dla użytkownika plugin do snippetów kodu dla WordPressa, który pozwala na dodawanie niestandardowego kodu bez konieczności edycji plików motywu.

Jest to znacznie bezpieczniejsze, ponieważ wtyczka pomaga zapobiegać błędom, które mogą powodować najczęstsze błędy WordPress. Aby uzyskać więcej informacji o wszystkich jej funkcjach, możesz przeczytać naszą pełną recenzję WPCode.

Wskazówka eksperta: W WPBeginner używamy WPCode do zarządzania wszystkimi niestandardowymi fragmentami kodu w naszym portfolio stron internetowych. Jest to dla nas niezawodny sposób na dodawanie funkcjonalności i bezpieczne wprowadzanie zmian bez bezpośredniej edycji pliku functions.php motywu.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie darmowej wtyczki WPCode. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do Fragmenty kodu » Dodaj fragment.

Tutaj zobaczysz wszystkie gotowe fragmenty kodu WPCode, które możesz dodać do swojej witryny. Obejmują one fragment, który pozwala całkowicie wyłączyć komentarze, przesyłać typy plików, których WordPress zazwyczaj nie obsługuje, wyłączyć strony załączników i wiele więcej.

Po prostu najedź kursorem myszy na „Dodaj własny kod”, a następnie kliknij „+ Dodaj niestandardowy fragment”, gdy się pojawi.

Aby dodać niestandardowy CSS do WordPressa, musisz wybrać „Snippet CSS” jako typ kodu z listy opcji, które pojawią się na ekranie.

Następnie, na następnej stronie, wpisz tytuł dla niestandardowego fragmentu kodu.

Może to być cokolwiek, co pomoże Ci zidentyfikować fragment w panelu administracyjnym WordPress.

W edytorze kodu dodaj następujący fragment kodu:

img:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

Ten fragment kodu spowoduje zanikanie każdego obrazu przez 2 sekundy, gdy użytkownik najechał na niego myszą. Aby obraz zanikał wolniej, po prostu zastąp „2s ease” wyższą liczbą. Jeśli chcesz, aby obraz zanikał szybciej, użyj „1s ease” lub mniejszej wartości.

Możesz również zwiększyć lub zmniejszyć „przezroczystość”, zmieniając linię opacity:0.6.

Jeśli zmienisz którąkolwiek z tych liczb, upewnij się, że zmienisz je we wszystkich właściwościach (webkit, moz, ms i o), aby efekt zanikania wyglądał tak samo w każdej przeglądarce.

Gdy będziesz zadowolony ze snippetu, przewiń do sekcji „Wstawianie”. WPCode może dodać Twój kod w różnych lokalizacjach, takich jak po każdym poście, tylko na froncie lub tylko w panelu administratora.

Aby dodać efekt zanikania do wszystkich Twoich obrazów, kliknij „Automatyczne wstawianie”, jeśli nie jest jeszcze zaznaczone. Następnie otwórz menu rozwijane „Lokalizacja” i wybierz „Nagłówek całej witryny”.

Następnie jesteś gotowy, aby przewinąć do góry ekranu i kliknąć przełącznik „Nieaktywny”, aby zmienił się na „Aktywny”.

Na koniec kliknij „Zapisz fragment”, aby fragment CSS stał się aktywny.

Teraz, jeśli najedziesz myszką na dowolny obraz na swojej stronie WordPress, zobaczysz efekt zanikania w akcji.

Metoda 2: Dodawanie animacji zanikania obrazu do poszczególnych stron

Używanie efektu zanikania dla każdego pojedynczego obrazu może być rozpraszające, zwłaszcza jeśli masz galerię zdjęć na swojej stronie, sklep z zdjęciami stockowymi lub jakąkolwiek inną witrynę z dużą ilością obrazów.

Mając to na uwadze, możesz chcieć użyć efektów zanikania tylko na konkretnej stronie lub poście.

Dobra wiadomość jest taka, że WPCode pozwala na tworzenie niestandardowych skrótów. Możesz umieścić ten skrót na dowolnej stronie, a WordPress wyświetli efekty zanikania tylko na tej stronie.

Aby to zrobić, po prostu utwórz niestandardowy fragment kodu i dodaj kod animacji zanikania, postępując zgodnie z tym samym procesem opisanym powyżej. Następnie kliknij przycisk „Zapisz fragment”.

Następnie przewiń do sekcji „Wstawianie”, ale tym razem wybierz „Krótki kod”.

Tworzy to krótki kod, który można dodać do dowolnej strony, wpisu lub obszaru gotowego na widżety.

Następnie przejdź dalej i aktywuj fragment kodu, wykonując ten sam proces opisany powyżej.

Możesz teraz przejść do dowolnej strony, posta lub obszaru gotowego na widżety i utworzyć nowy blok „Krótki kod”. Następnie po prostu wklej krótki kod WPCode do tego bloku.

Aby uzyskać więcej informacji na temat umieszczania skróconego kodu, zapoznaj się z naszym przewodnikiem jak dodać skrócony kod w WordPress.

Po wykonaniu tej czynności kliknij przycisk „Zaktualizuj” lub „Opublikuj”, aby krótki kod stał się aktywny. Następnie możesz odwiedzić tę stronę, stronę lub obszar gotowy na widżety, aby zobaczyć efekt zanikania po najechaniu myszką.

Metoda 3: Dodawanie animacji zanikania obrazu do obrazów wyróżnionych

Inną opcją jest dodanie animacji zanikania do Twoich obrazów wyróżniających lub miniatur wpisów. Są to główne obrazy wpisu.

Poprzez stopniowe zanikanie wyróżnionych obrazów po najechaniu myszką, możesz sprawić, że Twoja strona będzie bardziej przyciągająca wzrok i angażująca, bez animowania każdego pojedynczego obrazu na Twoim blogu WordPress lub stronie internetowej.

Aby dodać animację zanikania do miniatur Twoich wpisów, po prostu utwórz nowy niestandardowy fragment kodu, postępując zgodnie z tym samym procesem opisanym powyżej.

Tym razem dodaj następujący kod do edytora:

img.wp-post-image:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

Następnie przewiń do pola „Wstawianie” i wybierz „Automatyczne wstawianie”.

Następnie otwórz menu rozwijane „Lokalizacja” i wybierz „Nagłówek w całej witrynie”.

Po tym możesz przejść dalej i opublikować fragment kodu, korzystając z tego samego procesu opisanego powyżej.

Teraz możesz najechać myszką na dowolny obraz wyróżniający, aby zobaczyć animację zanikania w akcji.

Jeśli chcesz dodać jeszcze więcej efektów najechania myszką na obrazy, zapoznaj się z naszym przewodnikiem jak dodać efekty najechania myszką na obrazy w WordPressie.

Najczęściej zadawane pytania (FAQ)

Oto odpowiedzi na najczęściej zadawane pytania dotyczące dodawania efektów najechania myszką na obrazy w WordPressie.

Czy dodanie efektu zanikania spowolni moją witrynę?

Nie, ten efekt zanikania oparty na CSS nie powinien zauważalnie spowolnić Twojej witryny. Kod wykorzystuje proste przejścia CSS, które są bardzo lekkie i zoptymalizowane przez nowoczesne przeglądarki internetowe.

Ta metoda jest znacznie bardziej wydajna niż używanie JavaScriptu lub dużych bibliotek animacji do tak prostego efektu.

Jak zastosować efekt zanikania do pojedynczego, konkretnego obrazu?

Aby skierować się na pojedynczy obraz, możesz przypisać mu niestandardową klasę CSS. Najpierw wybierz blok obrazu w edytorze i znajdź panel „Zaawansowane” w ustawieniach bloku po prawej stronie.

W polu „Dodatkowe klasy CSS” dodaj unikalną nazwę, na przykład custom-fade-image. Następnie zmodyfikuj swój fragment kodu WPCode, aby skierować go konkretnie na tę klasę, w następujący sposób:
img.custom-fade-image:hover { ... }.

Czy efekt zanikania obrazu po najechaniu myszką działa na urządzeniach mobilnych?

Akcja „mouseover” lub „hover” jest specyficzna dla użytkowników komputerów stacjonarnych z kursorem myszy. Ten efekt nie zostanie uruchomiony na urządzeniach dotykowych, takich jak smartfony czy tablety, ponieważ nie ma kursora, którym można by najechać na obrazy.

Jednak kod nie spowoduje żadnych problemów na urządzeniach mobilnych. Twoje obrazy po prostu wyświetlą się normalnie, bez animacji zanikania.

Czy mogę użyć innych efektów animacji oprócz zanikania?

Tak, absolutnie. Zanikanie to tylko jedna z wielu możliwości, które można osiągnąć za pomocą CSS.

Możesz tworzyć efekty takie jak zoom, przesuwanie, skalę szarości lub nakładać warstwy. Więcej pomysłów i przykładów kodu znajdziesz w naszym szczegółowym przewodniku na temat jak dodać efekty najechania na obraz w WordPress.

Dodatkowe zasoby dotyczące efektów i zarządzania obrazami &

Proste zanikanie to świetny początek, ale istnieje wiele innych sposobów, aby Twoje obrazy były bardziej angażujące. Jeśli chcesz poznać bardziej zaawansowane opcje, oto kilka naszych innych przewodników na temat efektów i zarządzania obrazami:

• Jak dodać filtry zdjęć w stylu Instagram w WordPress (krok po kroku)
• Jak pokazać zdjęcie przed i po w WordPressie (z efektem przesuwanej ramki)
• Jak dodać brak możliwości kliknięcia prawym przyciskiem myszy na obrazach w WordPress
• Jak tworzyć interaktywne obrazy w WordPress
• Jak łatwo dodać interaktywne obrazy 360 stopni w WordPress

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodawać efekty zanikania obrazów po najechaniu myszką w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat organizowania plików WordPress w folderach biblioteki multimediów oraz naszymi rekomendacjami najlepszych wtyczek i narzędzi do obsługi obrazów wyróżnionych w WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.