Obrazy zwiększają zaangażowanie użytkowników na stronach internetowych. Dlatego musisz zoptymalizować obrazy, dowiedzieć się, jak dodawać piękne galerie zdjęć i rozwiązać wszelkie problemy z obrazami w swojej witrynie. Istnieje wiele sposobów, aby Twoje obrazy wyróżniały się. Jednym z nich jest użycie efektu blaknięcia na obrazach. W tym artykule pokażemy, jak zanikać obrazy na mouseover w WordPress.
Zasadniczo, gdy użytkownik przesunie kursor myszy nad obrazem w witrynie, lekko zniknie. Zobacz przykładowy zrzut ekranu poniżej:
Najpierw pokażemy Ci, jak dodać prosty efekt zanikania obrazów w postach WordPress. Będziemy używać do tego CSS. Wszystko, co musisz zrobić, to skopiować i wkleić następujący kod do motywu lub motywu podrzędnego styl.css plik.
.post img: hover {
nieprzezroczystość: 0.6;
filter: alpha (opacity=60); / * dla IE8 i wcześniejszych */
}
Ten fragment CSS wpłynie na wszystkie obrazy wyświetlane w postach WordPress. Jednak w tym fragmencie jest niewielka usterka. Gdy użytkownik przesunie kursor myszy na obraz, natychmiast przełącza krycie. To trochę szorstkie, prawda? Sprawmy, aby było to trochę bardziej płynne, dodając reguły przejścia CSS.
.post img: hover{
nieprzezroczystość: 0.6;
filter: alpha (opacity=60); / * dla IE8 i wcześniejszych */
- webkit-Przejście: wszystkie 2S łatwość;
- moz-Przejście: wszystkie 2S łatwość;
- ms-transition: all 2S ease;
- o-przejście: wszystkie 2S łatwość;
Przejście: wszystkie 2S łatwość;
}
Efekt ten można również odwrócić, ustawiając niższe krycie domyślne dla obrazów, a następnie zmniejszając go do pełnego krycia, tworząc efekt świecenia. Wszystko, co musisz zrobić, to użyć następującego CSS w arkuszu stylów:
.post img {
nieprzezroczystość: 0,7;
filtr: alpha (nieprzezroczystość=70); / * dla IE8 i wcześniejszych */
}
.post img: hover{
nieprzezroczystość: 1.0;
filtr: alpha (nieprzezroczystość=100); /* dla IE8 i wcześniejszych */
- webkit-Przejście: wszystkie 2S łatwość;
- moz-Przejście: wszystkie 2S łatwość;
- ms-transition: all 2S ease;
- o-przejście: wszystkie 2S łatwość;
Przejście: wszystkie 2S łatwość;
}
Niektórzy z naszych użytkowników mogą nie chcieć dodawać tego efektu do wszystkich zdjęć w swoich postach. Co powiesz na tylko polecane obrazy lub umieszczanie miniaturek? Aby dodać ten efekt tylko do miniatur postów, możesz użyć domyślnego .wp-post-image Klasa wygenerowana przez WordPress dla polecanych obrazów. Wystarczy wymienić .post img: hover z img.wp-post-image: hover.
Możesz dostosować wartość krycia lub czas opóźnienia przejścia, aby uzyskać pożądany efekt. Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak zanikać obrazy na mouseover w WordPress. Daj nam znać, co myślisz, zostawiając swoje opinie i pytania w komentarzach poniżej. Nie zapomnij śledzić nas na Twitterze.
