← Repozytorium modułów
klasa: hover-plus — najedź myszką
klasa: hover-plus — najedź myszką

Efekt hover — kwadrat + plus (4Hand)

Klasa CSS na module Obraz lub Galerii Divi: hover-plus
Po najechaniu: żółty kwadrat na środku, dwie białe kreski wjeżdżają od górnej i lewej krawędzi tworząc plus, a zdjęcie delikatnie się przybliża — bez powiększania kafla.

Jak użyć

  1. Na module Obraz lub Galeria → Zaawansowane → Klasa CSS: hover-plus.
  2. Można łączyć z żółtym rogiem: hover-plus zolty-rog (plus na ::after, róg na ::before — patrz moduł „Narożnik zdjęcia”).
  3. Galeria Divi: wyłącz jej własną nakładkę — Projektowanie → Nakładka → kolor nakładki i kolor ikony na przezroczysty.

Regulacja (w CSS)

  • wielkość kwadratu: 64px  ·  długość/grubość kresek: 3px 26px, 26px 3px
  • skąd wjeżdżają kreski: 50% 0%, 0% 50%  ·  tempo: background-position .5s

Kod CSS — do skopiowania

/* =====================================================
   4HAND — MODUŁ: Hover „żółty kwadrat + plus" (jak na 4hand.net)
   + zoom zdjęcia BEZ powiększania kafla.
   -----------------------------------------------------
   Użycie w Divi: klasa CSS "hover-plus" na module Obraz lub Galeria.
   Działa też automatycznie na kaflach powiązanych realizacji (.rp-foto).

   ::after = JEDNA nakładka na CAŁE zdjęcie, trzy warstwy tła:
     1) biała kreska pionowa  — startuje przy GÓRNEJ krawędzi, jedzie do środka,
     2) biała kreska pozioma  — startuje przy LEWEJ krawędzi, jedzie do środka,
     3) żółty kwadrat 56x56   — stały, na środku (pod kreskami).
   Kreski łączą się na środku = plus na żółtym kwadracie.
   ::before zostaje wolny → można dołożyć żółty róg (klasa zolty-rog).
   ===================================================== */

/* rama + zoom obrazka — kafel się NIE powiększa, tylko zdjęcie w środku */
.hover-plus .et_pb_image_wrap,
.hover-plus .et_pb_gallery_image,
.rp-foto{ position:relative; overflow:hidden; display:block; }

.hover-plus .et_pb_image_wrap img,
.hover-plus .et_pb_gallery_image img,
.rp-foto img{ transition:transform .5s cubic-bezier(.2,0,.2,1); display:block; }

.hover-plus .et_pb_image_wrap:hover img,
.hover-plus .et_pb_gallery_image:hover img,
.rp-kafel:hover .rp-foto img{ transform:scale(1.06); }

/* nakładka: żółty kwadrat (stały) + dwie kreski jadące od krawędzi zdjęcia */
.hover-plus .et_pb_image_wrap::after,
.hover-plus .et_pb_gallery_image::after,
.rp-foto::after{
  content:""; position:absolute; inset:0; z-index:3; opacity:0;
  background-image:
    linear-gradient(#fff,#fff),          /* 1: kreska pionowa */
    linear-gradient(#fff,#fff),          /* 2: kreska pozioma */
    linear-gradient(#F0C609,#F0C609);    /* 3: żółty kwadrat (pod spodem) */
  background-repeat:no-repeat;
  background-size:3px 26px, 26px 3px, 56px 56px;
  background-position:50% 0%, 0% 50%, 50% 50%;   /* start: pionowa u góry, pozioma z lewej, kwadrat na środku */
  transition:opacity .25s ease, background-position .5s cubic-bezier(.2,0,.2,1);
  pointer-events:none;
}
.hover-plus .et_pb_image_wrap:hover::after,
.hover-plus .et_pb_gallery_image:hover::after,
.rp-kafel:hover .rp-foto::after{
  opacity:1;
  background-position:50% 50%, 50% 50%, 50% 50%;  /* kreski dojeżdżają do środka; kwadrat stoi */
}

/* GALERIA DIVI — ukryj domyślną nakładkę (białe tło + ikona lupy), żeby był widoczny nasz efekt */
.hover-plus .et_pb_gallery_image .et_overlay{ background:transparent !important; box-shadow:none !important; }
.hover-plus .et_pb_gallery_image .et_overlay::before{ content:"" !important; display:none !important; }

CSS wklej do Divi → Opcje motywu → Niestandardowy CSS. Ten sam kod działa na tej stronie (moduł Kod „CSS modułu”). Drugi moduł Kod to tylko styl opisu — nie kopiuj.

← Repozytorium modułów