Kolom laten groeien/uitlichten op Hover in Elementor - DeLaatbusiness

Kolom laten groeien/uitlichten op Hover in Elementor

2 min


109

Bent u op zoek naar het hover-effect waarbij de kolom, inclusief de achtergrond en de inhoud, inzoomt, groter wordt of vergroot wanneer u de muiscursor erover beweegt? Nou, laat me je vertellen, je hebt de juiste tutorial! Ik zal je leren hoe je dat hover-effect via Elementor stap voor stap kunt creëren zonder plug-ins of add-ons!

Dit is het effect dat je zou moeten kunnen krijgen als je deze tutorial hebt voltooid. Excuseert u alstublieft hoe oud mijn voorbeeld is!

grow_on_hover_tutorial_0

Laten we zonder verder oponthoud beginnen met onze tutorial!

Stap 1: Maak eerst een nieuwe sectie in de visuele editor van Elementor.

grow_on_hover_tutorial_1

Stap 2: Selecteer welk type sectie u nodig heeft. Dit werkt in principe voor elk van hen.

grow_on_hover_tutorial_2

Stap 3: Laten we een paar widgets aan onze sectie toevoegen om de boel wat spannender te maken! Sleep gewoon de door u gekozen widget van het widgetspaneel in de zijbalk naar het sectiegebied.

grow_on_hover_tutorial_3
grow_on_hover_tutorial_4

Stap 4: Klik nu met de rechtermuisknop op het selectiekader van de kolom en klik op kolom bewerken.

grow_on_hover_tutorial_5

Stap 5: Ga vervolgens in het zijbalkpaneel naar Stijlen> Achtergrond> Achtergrondtype en kies Klassiek.

grow_on_hover_tutorial_6

Stap 6: Ga vervolgens naar Geavanceerd en ga naar Geavanceerd.

grow_on_hover_tutorial_7

Stap 7: Zoek naar het gedeelte Aangepaste CSS.

grow_on_hover_tutorial_8

Stap 8: Zodra u het heeft gevonden, plakt u deze code daar in het tekstgedeelte:

selector: hover {
    overgang: alle .2s gemak-in-uit;
    transformeren: schaal (1.2);
    cursor: aanwijzer;
    z-index: 1;
}

OPMERKING: Zie je die “selector”? Dat is het type widget dat we momenteel gebruiken. Dus als u besluit de kop te wijzigen, zorg er dan voor dat u deze ook bijwerkt, zodat u niet iets anders verandert… zoals ik deed!

grow_on_hover_tutorial_9

Nu zijn we klaar! Herhaal gewoon dezelfde procedure naar uw secties en u zou ontwerpen als de beste!


What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format