Jak zanikać obrazki po najechaniu myszą w WordPress (proste i łatwe)

Chociaż może się to wydawać drobnostką, jedną z rzeczy, które czasami dodajemy do naszych witryn WordPress, jest prosta animacja zanikania lub zanikania, gdy użytkownik przesuwa myszką nad obrazkiem. Jest to subtelny, ale skuteczny sposób na uczynienie naszych witryn bardziej angażującymi i interaktywnymi.

Odkryliśmy, że te małe wizualne wskazówki mogą mieć duży wpływ na to, jak odwiedzający wchodzą w interakcję z naszymi treściami. Nie chodzi tylko o to, by witryna wyglądała ładniej – te animacje mogą w rzeczywistości zachęcić odwiedzających do odkrywania większej ilości naszych treści.

W tym artykule pokażemy, jak dodać ten efekt zanikania obrazka po najechaniu myszką w WordPress.

Po co wygaszać obrazki po najechaniu myszą w WordPressie?

Animacje są łatwym sposobem na uczynienie witryny internetowej bardziej interesującą, a nawet mogą przyciągnąć uwagę odwiedzającego do najważniejszych treści twojej strony, takich jak logo witryny lub wezwanie do działania.

Istnieje wiele różnych sposobów korzystania z animacji CSS w WordPress, ale dodanie efektu najechania kursorem do obrazków jest szczególnie skuteczne. Animacja zanikania oznacza, że twoje obrazki będą powoli pojawiać się lub znikać po najechaniu na nie przez odwiedzających.

Zachęca to ludzi do interakcji z twoimi obrazkami, a nawet może dodać element opowiadania historii do strony. Na przykład, różne obrazki mogą się pojawiać i znikać, gdy użytkownik porusza się po stronie.

W przeciwieństwie do niektórych innych animacji, efekt zanikania obrazu po najechaniu myszą jest subtelny, więc nie wpłynie negatywnie na wrażenia z czytania ani na optymalizację obrazka.

Powiedziawszy to, pokażmy, jak dodać zanikanie do twoich obrazków po najechaniu myszką w WordPress. Wystarczy skorzystać z poniższych odnośników, aby przejść bezpośrednio do wybranej metody:

Metoda 1: Dodanie zaniku obrazu po najechaniu myszą do wszystkich obrazków WordPressa

Najprostszym sposobem na dodanie efektu zanikania do wszystkich twoich obrazków jest użycie WPCode. Ta darmowa wtyczka umożliwia łatwe dodawanie własnego kodu w WordPressie bez konieczności edytowania plików twojego motywu.

Dzięki WPCode nawet początkujący mogą edytować kod swojej witryny internetowej bez ryzyka błędów i literówek, które mogą powodować wiele typowych błędów WordPress.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i włączyć darmową wtyczkę WPCode. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu udaj się do Code Snippets ” Add Snippet.

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

Po prostu najedź kursorem myszy na „Add Your Custom Code”, a następnie kliknij „+ Add Custom Snippet”, gdy się pojawi.

Na początek wpisz tytuł własnego fragmentu kodu. Może to być cokolwiek, co pomoże zidentyfikować fragment kodu w kokpicie WordPress.

Aby dodać własny CSS do WordPressa, otwórz menu rozwijane „Rodzaj kodu” i wybierz „Fragment kodu CSS”.

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 wygasza każdy obrazek na 2 sekundy, gdy użytkownik najedzie na niego myszką. Aby obrazek zanikał wolniej, wystarczy zastąpić „2s ease” wyższą liczbą. Jeśli chcesz, aby obraz zanikał szybciej, użyj wartości „1s ease” lub mniejszej.

Możesz także zwiększyć lub zmniejszyć krycie, zmieniając linię krycia: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 z fragmentu kodu, przewiń do sekcji „Wstaw”. WPCode może dodać twój kod do różnych miejsc, takich jak po każdym wpisie, tylko frontend lub tylko administrator.

Aby dodać efekt zanikania do wszystkich twoich obrazków, kliknij opcję „Auto Insert”, jeśli nie jest jeszcze wybrana. Następnie otwórz menu rozwijane „Położenie” i wybierz „Nagłówek całej witryny”.

Następnie możesz przewinąć do góry ekranu i kliknąć przełącznik „Nieaktywne”, aby zmienił się na „Aktywne”.

Na koniec kliknij przycisk „Zapisz fragment”, aby uruchomić fragment kodu CSS.

Teraz, jeśli najedziesz myszką na dowolny obrazek na twojej witrynie internetowej WordPress, zobaczysz efekt zanikania w działaniu.

Metoda 2: Dodawanie animacji zanikania obrazków do poszczególnych stron

Używanie efektu zanikania dla każdego pojedynczego obrazka może rozpraszać uwagę, zwłaszcza jeśli masz galerię zdjęć na swojej witrynie internetowej, sklep ze zdjęciami stockowymi lub jakąkolwiek inną witrynę zawierającą wiele obrazków.

Mając to na uwadze, możesz chcieć użyć efektów zanikania tylko na określonej stronie lub wpisie.

Dobrą wiadomością jest to, że WPCode umożliwia tworzenie własnych krótkich kodów. Możesz umieścić ten krótki kod na dowolnej stronie, a WordPress pokaże efekty zanikania tylko na tej stronie.

Aby to zrobić, wystarczy utworzyć własny fragment kodu i dodać kod animacji zanikania zgodnie z tym samym procesem opisanym powyżej. Następnie kliknij przycisk „Zapisz fragment kodu”.

Następnie przewiń do sekcji „Wstaw”, 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żet.

Następnie przejdź dalej i uruchom fragment kodu, postępując zgodnie z tym samym procesem opisanym powyżej.

Możesz teraz przejść do dowolnej strony, wpisu lub obszaru gotowego na widżet i utworzyć nowy blok „Krótki kod”. Następnie wystarczy wkleić krótki kod WPCode do tego bloku.

Więcej informacji na temat umieszczania krótkiego kodu można znaleźć w naszym przewodniku na temat dodawania krótkiego kodu w WordPress.

Po zakończeniu kliknij przycisk „Aktualizuj” lub „Opublikuj”, aby uruchomić krótki kod. Następnie możesz przejść na tę stronę, podstronę lub obszar gotowy na widżet, aby zobaczyć efekt fade-on mouseover.

Metoda 3: Dodawanie animacji zanikania obrazu do wyróżniających się obrazków

Inną opcją jest dodanie animacji wygaszania do twoich wyróżniających się obrazków lub miniaturek wpisów. Są to główne obrazki wpisów.

Dzięki wygaszaniu wyróżniających się obrazków po najechaniu myszą, możesz sprawić, że twoja witryna będzie bardziej przyciągająca wzrok i angażująca bez konieczności animowania każdego pojedynczego obrazka na twoim blogu lub witrynie internetowej WordPress.

Aby dodać animację zanikania do twojej miniaturki, po prostu utwórz nowy własny fragment kodu, postępując zgodnie z tym samym procesem opisanym powyżej.

Tym razem jednak 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 „Wstaw” i wybierz opcję „Wstaw automatycznie”.

Następnie otwórz menu rozwijane „Położenie” i wybierz „Nagłówek całej witryny”.

Następnie można przejść dalej i uruchomić fragment kodu, korzystając z tego samego procesu opisanego powyżej.

Teraz możesz najechać kursorem myszy na dowolny wyróżniający się obrazek, aby zobaczyć animację zanikania w działaniu.

Jeśli chcesz dodać jeszcze więcej efektów najechania na obrazek, zapoznaj się z naszym przewodnikiem na temat dodawania efektów najechania na obrazek w WordPress.

Dodatkowe efekty do dodania do twoich obrazków WordPress

Efekty zanikania to zabawny sposób na uatrakcyjnienie obrazków, ale istnieje wiele innych sposobów wykorzystania animacji w WordPress. Na przykład, możesz użyć animacji flipbox, aby odsłonić tekst, gdy odwiedzający najedzie kursorem na obrazek lub efekty zoomu, aby użytkownicy mogli zbadać obrazek bardziej szczegółowo.

Oto inne ciekawe efekty, które możesz dodać do swoich obrazków:

• Jak dodać filtry zdjęć podobne do tych z Instagrama w WordPress (krok po kroku)
• Jak wyświetlić zdjęcie przed i po w WordPress (z efektem slajdów)?
• Jak dodać brak prawego przycisku myszy na obrazkach WordPressa?
• Jak tworzyć interaktywne obrazki w WordPress?
• Jak łatwo dodać interaktywne obrazki 360 stopni w WordPress?

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak wygaszać obrazki 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 i naszymi eksperckimi wyborami najlepszych wyróżniających się obrazków i narzędzi dla WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.