Płynne pojawianie się i zanikanie obrazka po najechaniu kursorem w CSS3

Efekty hover dodają interaktywności do stron WordPress bez JavaScriptu. Poniżej znajdziesz praktyczne wzorce fade in / fade out na obrazkach: od jednego przejścia opacity, przez nakładkę z tekstem, aż po warianty bezpieczne dla klawiatury i prefers-reduced-motion. Wszystkie przykłady działają w motywie klasycznym i w bloku Własny HTML w edytorze bloków.

#Kiedy używać transition, a kiedy animation

Dla hover wystarczy transition. Animacja (@keyframes) ma sens dopiero wtedy, gdy efekt ma się zapętlać albo startować przy wejściu na stronę, a nie przy najechaniu kursorem. W portfolio, galeriach produktów WooCommerce i kartach usług prawie zawsze wygrywa transition: jest tańsza w utrzymaniu, łatwiejsza do zsynchronizowania z design systemem i mniej podatna na „miganie” przy skrolowaniu.

Praktyczna zasada z wdrożeń motywów: trzymaj czas w przedziale 200-300 ms. Poniżej 150 ms efekt jest prawie niewidoczny. Powyżej 400 ms użytkownik ma wrażenie, że interfejs „muli”. Krzywa ease-in-out daje najbardziej naturalne wejście i wyjście dla opacity; ease-out sprawdza się, gdy element ma szybko „wpaść” w stan hover, a wolniej wracać. Opóźnienie (transition-delay) przydaje się, gdy warstwa wewnętrzna ma poczekać na zewnętrzną; przy zwykłym fade obrazka zostaw 0s, bo każde opóźnienie spowalnia odczucie interfejsu.

#Jaki HTML jest potrzebny do fade hover na obrazku

Kontener jest obowiązkowy. Bez niego nie zrobisz nakładki, a sam obrazek bez wrappera łatwo „ucieknie” poza układ siatki w motywie.

<div class="image-container">
  <img src="obrazek.jpg" alt="Opis zdjęcia produktu" class="fade-image" width="800" height="600" loading="lazy">
</div>

Atrybuty width i height ograniczają CLS. loading="lazy" zostaw poza pierwszym ekranem. Alt ma opisywać treść, nie efekt wizualny: „zdjęcie z fade” w altcie nic nie daje czytnikowi ekranu.

#CSS dla efektu fade

Najprostszy wariant: obrazek lekko traci krycie po najechaniu. To dobry start do galerii i miniaturek w figure.

.image-container {
  position: relative;
  overflow: hidden;
}

.fade-image {
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.fade-image:hover {
  opacity: 0.7;
}

W WordPressie wrzuć to do style.css motywu potomnego albo do bloku CSS w Wygląd, Dostosuj, Dodatkowy CSS. Unikaj edycji plików wtyczek i motywu nadrzędnego: aktualizacja nadpisze zmiany.

#Jak zrobić fade hover z nakładką tekstu

Częsty wzorzec w portfolio: zdjęcie przygasza, a na środku pojawia się podpis albo „Zobacz projekt”. Hover musi siedzieć na kontenerze, inaczej kursor na tekście „gubi” stan i efekt miga.

.image-container {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.image-container img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease;
}

.image-container::after {
  content: "Zobacz więcej";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: #fff;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.image-container:hover img,
.image-container:focus-within img {
  opacity: 0.55;
}

.image-container:hover::after,
.image-container:focus-within::after {
  opacity: 1;
}

Jeśli tekst ma być linkiem, nie pakuj go w ::after. Użyj prawdziwego <a> lub <span> w HTML, bo czytniki ekranu i SEO lepiej znoszą treść w DOM niż w pseudoelementach.

#Jak zrobić fade hover ze zmianą koloru tła

Gdy chcesz, żeby spod zdjęcia „przeświecał” kolor marki, ustaw tło na wrapperze i animuj tylko img.

.fade-bg-image {
  background-color: #0a0a0a;
  display: inline-block;
  line-height: 0;
}

.fade-bg-image img {
  display: block;
  transition: opacity 0.3s ease;
}

.fade-bg-image:hover img {
  opacity: 0.5;
}

Kolor tła warto trzymać w zmiennej CSS motywu (--brand-overlay), żeby nie duplikować hexów w dziesięciu regułach.

#Jak dodać lekki zoom do efektu fade hover

Sam fade bywa płaski. Połączenie opacity z lekkim skalowaniem wygląda nowocześnie, o ile nie przesadzisz ze skalą: powyżej 1.05 widać „rozjechanie” na krawędziach.

.zoom-fade {
  overflow: hidden;
}

.zoom-fade img {
  transform: scale(1);
  opacity: 1;
  transition:
    transform 0.3s ease-out,
    opacity 0.3s ease-out;
}

.zoom-fade:hover img {
  transform: scale(1.04);
  opacity: 0.85;
}

overflow: hidden na kontenerze jest krytyczne: bez niego powiększony obrazek nachodzi na sąsiednie karty w siatce CSS Grid / Flexbox.

#Jak zrobić dostępny fade hover (klawiatura i reduced motion)

Hover nie działa na telefonie tak jak na desktopie. Na touch urządzeniu pierwszy tap często tylko „odpala” stan, drugi dopiero klika. Dlatego ważne elementy (CTA, tytuł projektu) muszą być widoczne także bez hovera albo po fokusie.

@media (prefers-reduced-motion: reduce) {
  .fade-image,
  .image-container img,
  .image-container::after,
  .zoom-fade img {
    transition: none !important;
  }
}

.image-container a:focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 3px;
}

Checklist przed wdrożeniem:

1. Czy CTA jest czytelne bez hovera na mobile?
2. Czy fokus klawiatury pokazuje ten sam stan co hover (:focus-within)?
3. Czy prefers-reduced-motion wyłącza płynne przejścia?
4. Czy kontrast tekstu na nakładce spełnia WCAG AA (zwykle białe na półprzezroczystym czarnym)?
5. Czy efekt nie ukrywa jedynej informacji o produkcie (cena, status, etykieta „wyprzedane”)?

#WordPress: gdzie wstawić kod bezpiecznie

Na stronach klientów takie efekty najlepiej trzymać w motywie potomnym albo w lekkim mu-pluginie z jednym plikiem CSS. Customizer jest dobry na prototyp, słaby na produkcję z wieloma środowiskami.

W Gutenbergie możesz owinąć obrazek w grupę z klasą dodatkową (zoom-fade) przez panel Zaawansowane, pole Dodatkowe klasy CSS. Nie buduj osobnego bloku tylko po to, żeby dodać transition.

#Jakie błędy fade hover widać w audytach

• Transition na background-image - przeglądarki tego płynnie nie animują; animuj opacity warstwy lub osobny overlay.
• Hover na samym img wewnątrz linka - przy przejściu kursora na sąsiedni padding efekt znika.
• Brak display: block na obrazku - zostaje szczelina baseline i „skacze” layout.
• Animowanie width / height zamiast transform - gorsza wydajność, więcej reflow.
• Kilka różnych czasów (0.2s, 0.45s, 0.8s) w jednym widoku - wygląda niespójnie.
• Ukrywanie całego tekstu tylko przez opacity: 0 bez alternatywy dla mobile.

#Jak wdrożyć fade hover w 15 minut

1. Dodaj kontener z jedną klasą utility używaną w całym motywie.
2. Ustaw jedną długość transition (np. 0.28s) i trzymaj ją wszędzie.
3. Podłącz :hover i :focus-within do tej samej reguły.
4. Dodaj media query dla prefers-reduced-motion.
5. Sprawdź kartę na desktopie, tablecie i telefonie.
6. Zweryfikuj Lighthouse Accessibility i kontrast nakładki.
7. Zapisz zmianę w Git z krótkim opisem „hover fade gallery cards”.

#Częste pytania o pojawianie się i zanikanie po najechaniu w CSS3

#Czy do fade na hover potrzeba jQuery albo GSAP

Nie. Do prostego fade wystarczy CSS Transitions. Biblioteki animacji mają sens przy sekwencjach scroll-triggered, timeline’ach reklamowych albo synchronizacji z dźwiękiem. Na karcie bloga albo w siatce portfolio jQuery tylko dokłada wagę.

#Dlaczego efekt miga po najechaniu na tekst na obrazku

Bo hover jest podpięty pod dziecko (`img`), a nie pod rodzica. Przenieś selektor na `.image-container:hover` albo użyj `:focus-within`. Dzięki temu cały obszar karty trzyma jeden stan.

#Jak zrobić fade między dwoma obrazkami

Ułóż dwa `img` absolutnie w tym samym kontenerze i przełączaj opacity między nimi. Alternatywnie użyj jednego obrazka i zmieniaj `src` dopiero po zakończeniu transition - inaczej zobaczysz „skok” bez fade.

#Czy transition psuje Core Web Vitals

Sam fade opacity / transform jest tani dla GPU. Problemem jest animowanie layoutu (szerokość, top, left) oraz zbyt ciężkie filtry. Trzymaj się opacity i transform, unikaj animacji na dużych, nieprzeskalowanych PNG.

#Fade hover a Internet Explorer

IE 10 i 11 obsługują podstawowe transitions. Prefiksy `-webkit-` nie są już potrzebne w nowoczesnych przeglądarkach. Jeśli ktoś nadal wymaga IE 9, fade i tak nie zadziała płynnie, więc zostaw statyczny stan bez transition.

#Jak załadować arkusz z efektem fade przez wp_enqueue_style

Zamiast luźnego bloku <style> w header.php lepiej użyć API kolejkowania motywu. Wtedy zależności, wersjonowanie i ładowanie są przewidywalne.

<?php
declare(strict_types=1);

add_action('wp_enqueue_scripts', static function (): void {
    $theme_version = wp_get_theme()->get('Version');
    $css_path = get_theme_file_path('assets/css/hover-fade.css');
    $css_ver = file_exists($css_path) ? (string) filemtime($css_path) : $theme_version;

    wp_enqueue_style(
        'theme-hover-fade',
        get_theme_file_uri('assets/css/hover-fade.css'),
        [],
        $css_ver
    );
});

• filemtime unieważnia cache przy każdej zmianie pliku, bez ręcznego podbijania wersji.
• Uchwyt theme-hover-fade można wyrejestrować albo nadpisać w motywie potomnym.
• Nie powstają duplikaty, gdy blok albo wtyczka próbuje wstrzyknąć te same reguły.

W motywach blokowych (FSE) nadal można załadować mały arkusz z klasami utility albo dopisać klasy w theme.json. Większe reguły hover z media queries i tak należą do plików CSS. Jeśli efekt jest potrzebny tylko w jednym szablonie, otocz kolejkowanie warunkiem is_singular() / is_page_template().

#Dlaczego fade nie działa w blokach Gutenberga

Gutenberg zmienia strukturę DOM mocniej niż szablony klasyczne. Fade, który „działał w Classic”, zwykle przestaje działać z jednego z tych powodów.

#Zły selektor na wrapperze

Bloki są owinięte w .wp-block-image, .wp-block-group albo figure/figcaption. Reguła celująca wprost w img:hover nie zadziała, gdy hover dzieje się na linku wokół obrazka.

/* Za wąsko w wielu układach blokowych */
.wp-block-image img:hover {
  opacity: 0.7;
}

/* Odporniej */
.wp-block-image a:hover img,
.wp-block-image a:focus-visible img,
.wp-block-image figure:hover img {
  opacity: 0.7;
}

#Style inline i obrazki w treści

Style obrazka ustawione w edytorze (style="width:...") nie muszą konkurować z opacity, ale !important w resecie motywu albo w CSS wtyczki już tak. Trzymaj niską i spójną specyficzność, a przy fade nie używaj !important.

#Dodatkowy CSS czy arkusz bloku

„Dodatkowy CSS” w Wygląd i Dostosuj wystarcza na prototyp. Na produkcji lepszy jest własny plik ładowany przez kolejkę albo styl konkretnego bloku zarejestrowany przez wp_enqueue_block_style, żeby reguły ładowały się tylko tam, gdzie blok występuje.

#Interaktywność i zagnieżdżone bloki

Grupa z linkami w środku może uruchomić hover na rodzicu, gdy fokus jest na dziecku. Testuj myszą i klawiszem Tab. :focus-within na wrapperze karty rozwiązuje większość takich przypadków.

#Edytor a frontend

Płótno edytora nie zawsze ładuje frontendowy CSS motywu. Jeśli klient „nie widzi fade w edytorze”, to normalne, chyba że style ładujesz też przez enqueue_block_assets albo add_editor_style. Zapisz tę różnicę w dokumentacji: efekt widać na opublikowanej stronie, niekoniecznie w edytorze.

#Jak dodać fade hover w bloku Galeria Gutenberg

W edytorze bloków najprostsza ścieżka wygląda tak: wstawiasz Galerię albo Siatkę, nadajesz grupie klasę zoom-fade, a reguły CSS trzymasz w motywie potomnym. Nie doklejaj inline style do każdego obrazka, bo przy kolejnej edycji treści klient nadpisze efekt albo zostawi niespójne czasy transition.

Dla motywów klasycznych opartych o ACF i powtarzalne karty (case study, zespół, produkty) trzymaj markup kontenera w partialu PHP albo w bloku ACF. Jedna klasa utility, wiele miejsc użycia. Gdy design system ma tokeny czasu (--motion-fast, --motion-base), podłącz transition do zmiennej zamiast hardcodować 0.3s w pięciu plikach.

Na sklepach WooCommerce fade na miniaturze kategorii bywa mylący, jeśli jednocześnie pokazuje się badge „promocja” tylko na hover. Badge musi być widoczny bez najechania, inaczej użytkownik mobilny w ogóle go nie zobaczy. To samo dotyczy etykiet „nowość” i stanów niedostępności.

#Która reguła transition działa na wejściu i wyjściu z hover

CSS Transitions Module Level 1 to wciąż W3C Working Draft, ostatnio opublikowany 8 stycznia 2026 roku, a nie gotowa rekomendacja. Specyfikacja mówi, że czas trwania, opóźnienie i funkcja czasu pochodzą z after-change style elementu, czyli ze stylu, do którego element przechodzi. Gdy kursor wjeżdża na obrazek, działa transition z reguły :hover. Gdy kursor zjeżdża, działa transition z reguły bazowej.

Wynikają z tego dwie praktyczne konsekwencje:

• Jeśli transition jest tylko w :hover, obrazek płynnie przygasa, ale po zjechaniu kursora wraca skokowo, bo reguła bazowa nie ma przejścia.
• Wejście i wyjście mogą mieć celowo różne tempo, na przykład szybka reakcja na wejściu i spokojniejszy powrót.

.hover-image {
  opacity: 1;
  transition: opacity 0.3s ease-out; /* używane w drodze powrotnej */
}

.hover-image:hover {
  opacity: 0.7;
  transition-duration: 0.15s; /* używane na wejściu */
}

Specyfikacja opisuje też sytuację, w której kursor zjeżdża, zanim fade się skończy. Sekcja 3.1 o szybszym odwracaniu przerwanych przejść wyjaśnia, że powrót z pełnym czasem na krótszym dystansie wygląda nierówno. Dlatego przejście powrotne jest skracane osobnym współczynnikiem (reversing shortening factor), a funkcja czasu nadal jest używana w całości, bez skoku w środek krzywej. Do liczenia pozostałego czasu nie potrzeba JavaScriptu. Źródło: CSS Transitions Module Level 1.

#Czy fade opacity to ruch według WCAG

Kryterium sukcesu 2.3.3 Animation from Interactions z WCAG 2.2 (poziom AAA) wymaga, żeby animację ruchu wywołaną interakcją dało się wyłączyć, chyba że jest niezbędna dla funkcji albo przekazywanej informacji. Dokument objaśniający W3C do 2.3.3 zawęża pojęcie: zmiany koloru albo opacity, które nie zmieniają postrzeganego rozmiaru, kształtu ani pozycji, nie są animacją ruchu. Erratum usunęło rozmycie z tego wyjątku, więc filter: blur() już się w nim nie mieści.

Czysty fade opacity jest więc poza zakresem 2.3.3, a transform: scale() zmienia postrzegany rozmiar i w zakres wchodzi. To pozwala napisać dokładniejszą regułę ograniczonego ruchu niż wyłączenie wszystkiego:

@media (prefers-reduced-motion: reduce) {
  .card-img {
    transform: none;
    transition: opacity 0.2s ease-out;
  }
}

MDN opisuje to samo podejście w dokumentacji prefers-reduced-motion: animacja skalowania zostaje złagodzona do przenikania, które nie wywołuje dolegliwości przedsionkowych. Wartość reduce jest traktowana jako prawda, więc @media (prefers-reduced-motion) znaczy to samo co @media (prefers-reduced-motion: reduce).

Fokus podlega innemu kryterium. 2.4.7 Focus Visible (poziom AA) wymaga widocznego wskaźnika fokusu, a MDN odsyła dodatkowo do 1.4.11 Non-text Contrast, które wymaga dla wskaźnika kontrastu co najmniej 3:1. Sama zmiana opacity na obrazku rzadko to spełnia, dlatego fokus potrzebuje własnego outline albo box-shadow.

#Dlaczego opacity 0 nie ukrywa elementu

Dokumentacja MDN dla opacity wskazuje trzy rzeczy, które w efektach hover często umykają:

• Element z opacity: 0 jest niewidoczny, ale nadal należy do DOM. Odbiera zdarzenia wskaźnika i może dostać fokus, jeśli jest w kolejności tabulacji. Ukryty przycisk na nakładce da się więc kliknąć i sfokusować. Pokaż go przy fokusie albo wyłącz zdarzenia wskaźnika przez pointer-events i wyjmij go z kolejności tabulacji.
• Sama opacity nie ukrywa treści przed czytnikami ekranu. Do tego służą atrybut hidden, visibility albo display.
• Każda wartość poniżej 1 tworzy nowy stacking context. Nakładka z z-index w karcie, która przygasa do 0.9, może trafić do innej kolejności warstw, niż się wydaje.

Jeśli przygasać ma tylko tło, MDN zaleca kolor tła z kanałem alfa zamiast opacity na całym elemencie. Przy tekście na obrazku kontrast między tekstem a tłem musi wystarczać także po fade.

#Fade przy pierwszym wyświetleniu z @starting-style

Transition startuje tylko wtedy, gdy wartość się zmienia. MDN wyjaśnia, że domyślnie przejścia nie uruchamiają się przy pierwszej aktualizacji stylu elementu ani wtedy, gdy display zmienia się z none na widoczną wartość. Karta wstawiona do DOM z opacity: 1 nie pojawi się więc z fade sama z siebie.

@starting-style określa wartości, od których ma ruszyć przejście. Dla elementów przełączanych do i z display: none potrzebne jest jeszcze transition-behavior: allow-discrete, bo display ma dyskretny typ animacji. Przy przejściu do none wartość zmienia się dopiero przy 100 procentach czasu, więc element jest widoczny przez cały fade.

.notice {
  opacity: 1;
  transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out, display 0.3s allow-discrete;
}

.notice.is-hidden {
  display: none;
  opacity: 0;
}

@starting-style {
  .notice {
    opacity: 0;
  }
}

Pierwsza linia transition jest celowa: MDN zapisuje właściwość dwa razy, żeby przeglądarki bez obsługi allow-discrete nadal animowały opacity. @starting-style ma tę samą specyficzność co reguła pierwotna, więc musi stać po niej. MDN oznacza obie funkcje jako Baseline 2024. Starsze przeglądarki pokażą element bez fade, co przy czysto wizualnym przejściu jest akceptowalnym zachowaniem awaryjnym.

#Jak zareagować na koniec fade przez transitionend

Gdy JavaScript tylko przełącza klasę, a fade robi CSS, skrypt może nasłuchiwać transitionend, żeby wiedzieć, kiedy przejście się skończyło, na przykład zanim ustawi hidden albo przeniesie fokus. Strona MDN o transitionend i specyfikacja podają cztery zasady, kiedy zdarzenie naprawdę przychodzi:

• transitionend odpala się w obu kierunkach: gdy element osiąga stan hover i gdy w pełni wraca.
• Jeśli przejście zostanie usunięte przed końcem, na przykład przez usunięcie transition-property albo ustawienie display: none, transitionend nie przyjdzie.
• Jeśli odpali się transitioncancel, na przykład bo kursor zjechał w połowie fade, transitionend dla tego przejścia nie przyjdzie.
• Gdy czas trwania i opóźnienie wynoszą 0s, przejścia nie ma i żadne ze zdarzeń przejścia się nie odpala.

Ostatnia zasada psuje najwięcej w praktyce. Gdy prefers-reduced-motion ustawia transition: none, skrypt sprzątający w transitionend czeka w nieskończoność. Filtruj po propertyName i miej ścieżkę zapasową, gdy żadne przejście nie trwa.

const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;

// W CSS: .is-fading-out { opacity: 0; }
function hideNotice(el) {
  el.classList.add('is-fading-out');
  if (reduce) {
    el.hidden = true;
    return;
  }
  el.addEventListener('transitionend', function onEnd(event) {
    if (event.propertyName !== 'opacity') return;
    el.removeEventListener('transitionend', onEnd);
    el.hidden = true;
  });
}

#Hover na ekranie dotykowym z media query hover

Funkcja medialna hover z Media Queries Level 4 sprawdza, czy główne urządzenie wejściowe potrafi zawisnąć nad elementem. Według MDN zwraca none, gdy główne wejście w ogóle nie obsługuje hover albo nie robi tego wygodnie, jak wiele telefonów emulujących hover długim przytrzymaniem. Wstaw regułę hover do @media (hover: hover), gdy „zawieszony” hover na telefonie przeszkadza, a :focus-visible zostaw poza nią, żeby fokus klawiatury dawał ten sam stan.

@media (hover: hover) {
  .card-media:hover {
    opacity: 0.75;
  }
}

.card-media:focus-visible {
  opacity: 0.75;
}

#Wsparcie przeglądarek dla transition, focus-visible i prefers-reduced-motion

Tabela pokazuje pierwszą wersję z obsługą bez prefiksu, według MDN browser-compat-data w wersji 8.1.6 (październik 2026).

Internet Explorer obsługuje transition od wersji 10, ale żadnej z pozostałych funkcji z tabeli. Safari miał transition z prefiksem -webkit- już od wersji 3.1.

Jedna konsekwencja tej tabeli łatwo umyka. W przeglądarce bez :focus-visible, na przykład w Safari starszym niż 15.4, cała reguła .card-media:hover, .card-media:focus-visible zostaje odrzucona, razem z częścią hover. MDN wyjaśnia w artykule o listach selektorów, że jeden nieobsługiwany selektor unieważnia całą listę. Zapisz hover i fokus jako dwie osobne reguły albo owiń je w :is(), które przyjmuje tolerancyjną listę selektorów.

#Co zapamiętać o fade hover CSS3

Fade in / fade out na hover to kilkanaście linii CSS, ale w skali całego motywu liczy się spójność: jeden czas, jeden easing, hover na kontenerze, fokus klawiatury i szacunek dla prefers-reduced-motion. Zacznij od samego opacity, dopiero potem dorzuć nakładkę albo lekki zoom. Po wdrożeniu przejrzyj trzy szablony: stronę główną, archiwum i pojedynczy wpis, bo niespójny hover w jednym z nich od razu zdradza brak design systemu.

Same przejścia CSS to najtańsza część roboty; trudniej utrzymać spójność efektów w całym motywie. Gdy takich detali robi się kilkadziesiąt, warto oprzeć je na jednym, utrzymywanym motywie. Jeśli potrzebujesz audytu frontendu albo wdrożenia design systemu w WordPressie, napisz przez formularz kontaktowy na wppoland.com.