CSS effecten voor afbeeldingen kunnen zorgen voor een mooi effect op je website.
Normaal gebruik je grafische software als Photoshop of The Gimp voor het maken van filters op je afbeeldingen, maar je kunt in beperkte mate ook in CSS je afbeeldingen voorzien van filters.
3 voorbeelden van CSS effecten
Ik heb drie voorbeelden voor je uitgewerkt van mooie effecten die je op je website afbeeldingen kunt toepassen. Deze drie voorbeelden betreffen: doorzichtigheid, zwart-wit en sepia.
Ik heb deze voorbeelden uitgewerkt in de onderstaande video. Onder de video zal ik de benodigde CSS code plaatsen, zodat je deze effecten zelf kunt toepassen op je website.
Doorzichtigheid
Om objecten op je website transparant te maken, kun je de CSS eigenschap opacity gebruiken. Je kunt voor deze eigenschap een waarde opgeven van 0 (helemaal doorzichtig) tot en met 1 (helemaal niet doorzichtig).
Een waarde tussen 0 en 1 bepaalt dus de mate van doorzichtigheid. Zo zal een waarde van 0.25 een meer vervaagde afbeelding geven dan een waarde van 0.75.
In de video zag je dat ik een afbeelding een opacity van 0.25 gaf en wanneer je boven de afbeelding zweefde, werd de opacity 1. Dit gebeurde met een overgang van een halve seconde.
Hieronder zie je de CSS code om dit effect te bereiken:
img {
opacity: 0.25;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
}
img:hover {
opacity:1;
}
Zwart-wit
Om een afbeelding in het zwart-wit te tonen, kun je gebruik maken van de CSS eigenschap filter. Je kunt als waarde dan grayscale gebruiken en het percentage daarvan opgeven.
In de video zag je dat ik een afbeelding in het zwart-wit toonde en als je er met de muis boven zweefde, kreeg de afbeelding kleur.
Hieronder zie je de CSS code om dit effect te bereiken:
img {
filter:grayscale(100%);
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-o-filter:grayscale(100%);
transition:0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
}
img:hover {
filter:grayscale(0%);
-webkit-filter:grayscale(0%);
-moz-filter:grayscale(0%);
-o-filter:grayscale(0%);
}
Sepia
Je kunt met de CSS eigenschap filter ook voor een sepia weergave zorgen. Dit doe je door als waarde sepia en het percentage van de waarde sepia op te geven.
De CSS code van het voorbeeld in de video is:
img {
filter:sepia(100%);
-webkit-filter:sepia(100%);
-moz-filter:sepia(100%);
-o-filter:sepia(100%);
transition:0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
}
img:hover {
filter:sepia(0%);
-webkit-filter:sepia(0%);
-moz-filter:sepia(0%);
-o-filter:sepia(0%);
}
Hou er wel rekening mee dat de CSS eigenschap filter niet wordt ondersteund door Internet explorer.
Specifieke classes gebruiken
Wanneer je bovenstaande CSS effecten toepast op je afbeeldingen, zorg er dan wel voor dat je de betreffende afbeeldingen een specifieke CSS class geeft.
Zou je de effecten op het standaard HTML element img toepassen, dan gaan de effecten gelden voor alle afbeeldingen op je website.
In de video wordt uitgelegd hoe je de afbeeldingen waarop een effect wordt toegepast, kunt voorzien van een specifieke class.
Toepassing in Joomla en Wordpress
Ik heb in de bovenstaande video de voorbeelden uitgewerkt met HTML en CSS. Uiteraard kun je één en ander ook toepassen in Joomla of Wordpress.
Om een afbeelding in een artikel een class te geven, moet je in Joomla in de tekstverwerker even klikken op de knop "schakelen tekstverwerker". Je komt dan in de HTML modus terecht van het artikel alwaar je de CSS class kunt toevoegen aan de afbeelding.
De CSS code kun je vervolgens plaatsen in het template.css bestand van je template.
Om in Wordpress een afbeelding een class te geven in een bericht of pagina, ga je in de tekstverwerker naar de tab "text". Je ziet dan de HTML modus en daar kun je de afbeelding dus een CSS class geven.
De CSS code plaats je in het style.css bestand van je thema. Beter zou het nog zijn als je een kind thema maakt, en daarin je CSS code plaatst.
PS: Vind je het nu leuk om te stoeien met HTML en CSS maar vind je het soms ook erg lastig, dan is de onderstaande cursus misschien iets voor jou:
