Kako dodati učinek zamenjave logotipa ob učinku lebdenja z uporabo Elementorja

Muneeb WordPress Tutorials Mar 1, 2022

Vsi vemo, kako je z Elementor Website Builderjem neomejeno prilagajanje. S to prilagoditvijo lahko izboljšamo uporabniško izkušnjo in smo kreativni pri ustvarjanju.

Učinek zamenjave logotipa ob lebdenju je, ko uporabnik postavi kazalec na logotip, ki je nameščen na vašem spletnem mestu, samodejno spremeni njegove podrobnosti, tj. barvo, obliko ali obris. V tej vadnici bomo razumeli, kako ustvariti zamenjavo logotipa ob učinku lebdenja z Elementorjem .

Kako ustvariti učinek zamenjave logotipa ob lebdenju z uporabo Elementorja

Že veste, kakšen je učinek in imate v mislih ideje o tem, kaj želite ustvariti, pojdimo naprej in poglejmo, kako.

Za začetek dodajte notranji razdelek za pripomočke.

Ustvarite neverjetna spletna mesta

Z najboljšim brezplačnim graditeljem strani Elementor

Začni zdaj

Nato morate v prvotno ustvarjen razdelek dodati stolpec . V tej vadnici bomo uporabljali strukturo z dvema stolpcem .

Nato povlecite in spustite slikovni gradnik v stolpec, ki ste ga ustvarili.

Da bo učinek deloval, boste potrebovali dve sliki. Eno naj se prikaže normalno, drugo pa, ko uporabnik postavi kazalec.

Uporabite lahko dve različici istega logotipa ali uporabite dve popolnoma različni sliki, možnosti so neomejene.

Po izbiri slike v polje CSS po meri prilepite naslednjo kodo CSS, da bo zamenjava logotipa pri učinku lebdenja delovala.

selector img:hover{
    content: url('https://wpbuilt.co/wp-content/uploads/2020/04/invision-logo-hover-new.png');
  opacity: .50;
  transition-duration: 3s;
 }

In končano! Objavite svojo stran za predogled in si oglejte, kako je učinek videti na vašem spletnem mestu. Vrnite se, da naredite kakršne koli spremembe, če želite.

Tako lahko z Elementorjem ustvarite učinek zamenjave logotipa ob lebdenju. Ne pozabite, da se nam pridružite na našem Facebooku in Twitterju , da boste obveščeni o naših objavah.