In deze tutorial laat ik je zien hoe je een heel eenvoudig fade-in effect kunt maken op de achtergrondafbeelding van een Elementor container of sectie. Met deze methode kun je de ondoorzichtigheid op elke container binnen de bovenliggende container behouden. Het gewenste effect zal er ongeveer uitzien zoals in de afbeelding hieronder.
Een kop binnen de container
Deze tekst of andere inhoud in de container zal niet vervagen als de achtergrond vervaagt. Het wordt op geen enkele manier beïnvloed.
Hoe het moet
Ik zal je eerst laten zien hoe je dit kunt doen met containers (wat nu de standaard is in 2024), maar ik zal je ook laten zien hoe je dit kunt bereiken met secties, die veel sites die gebouwd zijn voor de laatste upgrade zullen hebben.
Stap 1 is het maken van een nieuwe container en het toevoegen van een achtergrondafbeelding aan de container. Ga naar Stijl -> Achtergrond overlay en voeg je afbeelding toe. Voeg niet zomaar een achtergrondafbeelding toe aan de container, maar zorg ervoor dat je de afbeelding toevoegt met ‘Background overlay’, anders werkt het niet.
Klik vervolgens op ‘Geavanceerd’ en voeg een klasse toe aan deze container. Ga naar Geavanceerd -> CSS Klassen en voeg een klassenaam in. Dat kan van alles zijn, maar voor deze tutorial noem ik het‘my-fade-container‘ (zie de afbeelding hieronder).
Als je de ‘background overlay’ in Elementor gebruikt, wordt de afbeelding toegevoegd met de CSS-pseudoklasse ‘::before‘. Dit is wat we gaan manipuleren wanneer de gebruiker met de muis over de container beweegt.
.my-fade-container::before{
opacity:0;
transition:opacity 0.7s;
}
In de bovenstaande code richten we ons op het ::before element dat Elementor toevoegt wanneer een achtergrondoverlay wordt toegevoegd aan een container. We maken de opaciteit 0 zodat het in eerste instantie verborgen is. We voegen een overgangslengte van 0,7 seconden toe, zodat de fade-in niet onmiddellijk is (je kunt dit veranderen in elke duur die je wilt).
.my-fade-container:hover::before{
opacity:0.5;
}
Het volgende stukje CSS-code dat we toevoegen staat hierboven. Hiermee wordt de achtergrond weergegeven wanneer de gebruiker met de muisaanwijzer over onze container beweegt door de ondoorzichtigheid te wijzigen in iets boven 0 (in dit geval heb ik gekozen voor 0,5 – dus half transparant).
Je zult zien dat er nog wat ruimte zit tussen de inhoud van je container en de achtergrondafbeelding. Dit komt doordat Elementor nog een element toevoegt met de class ‘e-conn-inner’. In het volgende stukje code richten we ons op dat element, waardoor de padding en marge 0 worden.
.my-fade-container .e-con-inner{
padding:0;
margin:0;
}
En dat is het wel zo’n beetje! Om een afbeelding uit te faden in plaats van in te faden, begin je gewoon met een ondoorzichtigheid van meer dan 0 en verander je deze naar 0 bij de hover.
In het bovenstaande voorbeeld heb ik ook een rand en wat opvulling aan de container toegevoegd, evenals de regel ‘cursor:pointer’ voor het zweven over de container, maar in wezen heb je alleen de bovenstaande CSS-regels nodig om het effect te laten werken.
Hoe het wordt gedaan met secties
Als u uw site vóór de laatste update van Elementor hebt gemaakt, gebruikt uw site mogelijk Sections in plaats van Containers, waardoor de bovenstaande code niet werkt. Maar vrees niet, de code voor secties is net zo eenvoudig.
Stap 1 is het maken van een nieuwe sectie en het toevoegen van een achtergrondafbeelding aan de sectie. Ga naar Stijl -> Achtergrond overlay en voeg je afbeelding toe. Voeg niet zomaar een achtergrondafbeelding toe aan de sectie, maar zorg ervoor dat je de afbeelding toevoegt met ‘Background overlay’, anders werkt het niet.
Klik vervolgens op ‘Geavanceerd’ en voeg een class toe aan deze sectie. Ga naar Geavanceerd -> CSS Klassen en voeg een klassenaam in. Dat kan van alles zijn, maar voor deze tutorial noem ik het‘mijn-fade-sectie‘ (zie de afbeelding hieronder).
Wanneer je de‘background-overlay‘ gebruikt voor secties voegt Elementor een nieuwe div met de class‘elementor-background-overlay‘ toe aan de sectie en dan worden alle containers die je hebt binnen de sectie toegevoegd als aparte divs op hetzelfde niveau als de background-overlay div (dus geen kinderen, maar broers en zussen). Dit is wat we gaan manipuleren wanneer de gebruiker met de muis over de container beweegt.
section.my-fade-section .elementor-background-overlay{
opacity:0 !important;
transition:opacity 0.7s;
}
In de bovenstaande code richten we ons op het .my-fade-section-element dat Elementor toevoegt wanneer een achtergrondoverlay wordt toegevoegd aan een sectie. We maken de opaciteit 0 zodat het in eerste instantie verborgen is. We voegen een overgangslengte van 0,7 seconden toe, zodat de fade-in niet onmiddellijk is (je kunt dit veranderen in elke duur die je wilt).
section.my-fade-section:hover .elementor-background-overlay{
opacity:0.5 !important;
}
Het volgende stukje CSS-code dat we toevoegen staat hierboven. Hierdoor wordt de achtergrond weergegeven wanneer de gebruiker met de muisaanwijzer over onze sectie gaat door de opaciteit van de overlay div te wijzigen in iets boven 0 (de hoogste instelling voor opaciteit is 1). In dit geval verander ik het in 0,5, of ‘half’ transparant.
En dat is het wel zo’n beetje! Om een afbeelding te laten fade-out in plaats van fade-in, begin je gewoon met een ondoorzichtigheid boven 0 en verander je deze naar 0 bij hover.
In het bovenstaande voorbeeld heb ik een rand toegevoegd om het beter zichtbaar te maken, en wat opvulling voor de container, evenals de regel ‘cursor:pointer’ voor het zweven over de container, maar in wezen heb je alleen de bovenstaande CSS-regels nodig om het effect te laten werken.
Laat me in de reacties hieronder weten of dit voor jou heeft gewerkt.
