Jópofa “hover-effekt” a képeken

Szerző: | 2018. 09. 24. | Trükkös-Tippek

EGYEDI “EFFEKT” A KÉPEIDEN

Amióta megjelent a hover opció a DIVIben, azóta remek móka, hogy tulajdonképpen az egér valami fölé húzásával, mintha működésre lehetne bírni egy adott dolgot, képet, sort, modult, stb. Van viszont egy olyan, végtelenül egyszerű, de nagyon látványos megoldás, amivel azt a hatást érhetjük el, mintha mozogna a képünk egy eleme, megváltozna a színe, illetve egy munkám során egy elég hasznos funkcióját is felfeldeztem, kihagyhattam így egy előtte/utána plugint mert ez egész jól helyettesíteni tudta.

Rengeteg kreatív ötletet meg lehet valósítani, most 3 példát mutatok nektek, amihez nem kell más, mint néhány sor CSS, képek és egy előre definiált egyedi class, azaz osztály és íme az eredmények:

A hozzávalók és a trükkök

Tulajdonképpen minden képnél két teljesen ugyanakkora kép használódik és a második az első fölé kerül, mint egy layer a Photoshopban, ennyi a trükk és így lehet, hogy már azt is kitaláltad, hogy lehetett az itt látottakat elérni:

  • az első képnél egy kb 70%-os átlátszósággal készült fekete alapot készítettem, amiből kivágtam,-  tehát teljesen átlátszóvá tettem –  a DSK logot és webcímet,
  • a másodiknál még fontosabb, hogy a két kép teljesen ugyanakkora legyen, illetve méginkább az, hogy ugyanott helyezkedjen el rajta a kis jógázó lányka, csak az egyiken fel van emelve a keze, a másikon nincs, így a mozgás érzetét kelti, mikor fölé visszük az egeret,
  • a harmadik képen pedig teljesen ugyanazt a képet használtam, egyszerűen csak megváltoztattam a fő téma színét, ezért olyan, mintha a színe változtna meg.

    Bármilyen jópofa ötletet meg lehet valósítani, persze lesz olyan, amihez szükséged lesz egy képszerkesztő programra, de érdemes kisérletezgetni 🙂

Amit pedig mindenképp fontos megadnunk, az az egyéni CSS osztály, amit minden második kép modul beállításainál a HALADÓ fülön a CSS Osztály sorba kell beírni!

Az “effekt” sebességét a “0.6 s” érték változtatásával érheted el, minél nagyobb ez az érték, annál “lomhább” lesz a reakció, amikor a kép fölé húzod az egeret 🙂

Ha tetszett, mondd el, ha nem, azt is, ha kérdésed van, akkor tudod hol találsz bennünket és a remek csoportunkat ahol nincs buta kérdés, csak kérdés van és egymástól tanulás! Mára ennyi, kikapcs, üdv!

Zió

ELAKADTÁL? ÉSZREVÉTELED VAN? ÍRJ NEKÜNK!

4 + 1 =

NÉZD MEG!

TÖLTSD LE!

BESZÉLD MEG!