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!
Laten we zonder verder oponthoud beginnen met onze tutorial!
Stap 1: Maak eerst een nieuwe sectie in de visuele editor van Elementor.
Stap 2: Selecteer welk type sectie u nodig heeft. Dit werkt in principe voor elk van hen.
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.
Stap 4: Klik nu met de rechtermuisknop op het selectiekader van de kolom en klik op kolom bewerken.
Stap 5: Ga vervolgens in het zijbalkpaneel naar Stijlen> Achtergrond> Achtergrondtype en kies Klassiek.
Stap 6: Ga vervolgens naar Geavanceerd en ga naar Geavanceerd.
Stap 7: Zoek naar het gedeelte Aangepaste CSS.
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!
Nu zijn we klaar! Herhaal gewoon dezelfde procedure naar uw secties en u zou ontwerpen als de beste!
0 Comments