Afbeeldingen zijn steeds belangrijker geworden in recente jaren: veel websites, waaronder natuurlijk ook veel WordPress websites, draaien eigenlijk compleet om de afbeeldingen die op de website worden weergegeven. Sommige designs bestaan praktisch alleen maar uit afbeeldingen. Verandering van spijs doet eten en daarom sporen we graag aan tot wat meer creativiteit in de zee van afbeeldingen op de WordPress websites op het web: voeg eens een fade effect toe aan je afbeeldingen!
Wat is een fade effect?
Een fade effect zorgt ervoor dat de afbeeldingen op je website worden ‘witgewassen’ wanneer je er met je muis overheen gaat. Effectief is het zo dat hierdoor je website net even wat professioneler oogt en de afbeeldingen ook wat professioneler uit de verf komen doordat de afbeeldingen eigenlijk meer op een ‘voetstukje’ worden geplaatst. Daarbij houden mensen van interactie, dus als er een effect wordt toegevoegd aan je afbeeldingen bij een zogenaamde ‘on-hover’, dan is dat een verrijking voor je website.
Hoe pas ik een fade effect toe?
Het is niet moeilijk om een fade effect toe te voegen aan de afbeeldingen op je WordPress website. Het enige dat je hiervoor moet doen is een wijziging doorvoeren in je style sheet. Je gaat naar ‘Appearance’, vervolgens naar ‘Editor’, naar ‘Stylesheet’ en vervolgens naar style.CSS. Daarna voeg je de volgende code toe aan dit bestand:
img { opacity: 1.0; transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; } a:hover img { opacity: .6; transition: opacity .55s ease-in-out; -moz-transition: opacity .55s ease-in-out; -webkit-transition: opacity .55s ease-in-out; }
Vervolgens zullen de afbeeldingen op je website voortaan automatisch een fade effect weergeven zodra men er met een muis overheen beweegt. Met het cijfer achter de opacity kun je de mate van ‘faden’ gemakkelijk bepalen. Je bezoekers zullen het nieuwe effect absoluut weten te waarderen!
