CSS Effecten voor afbeeldingen

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:

Cursus Responsive Design met HTML en CSS

Reacties  

#5 Peter Suijker 04-11-2017 16:56
Beste Mindert,
Bedankt weer voor de CSS uitleg, maar nu heb ik nog een andere vraag:
Hoe kan ik een Youtube Filmpje automatisch starten, zodra ik met mijn muis over het filmpje ga en daarna, Hoe kan ik dit filmpje ook nog aan het einde stoppen zodat er niet weer een ander filmpje opgestart wordt. Uiteraard is zoiets wel te koop denk ik maar onze club moet een beetje op de centen letten, vandaar.
Ik zal jou heel vriendelijk bedanken als je daar iets meer over kan vertellen.

Met vriendelijke groet
Citeer
#4 Ruud in t Veld 03-11-2017 16:01
Leuke effecten. Toch eens mee spelen.
Citeer
#3 Loes 03-11-2017 15:20
Overigens zien mijn tegels er nog steeds anders uit dan die op https://netspecialist.nl/blog
Verder heb ik aan .item h2 toegevoegd
font-size:130%;
Nu is de tekst beter in verhouding tot de tegel.
Citeer
#2 Loes 03-11-2017 15:06
Hallo Mindert
Wat een leuk artikel! Op een van mijn sites heb ik een pagina waar ik dit goed kan toepassen:
http://www.natuurstichtingkadans.nl/terugblik
Deze pagina met menu-item Terugblik toont in een blogweergave een reeks pagina's die je kunt uitklappen naar pagina's met foto's. Ik heb dit ingericht volgens jouw artikel
https://netspecialist.nl/joomla/461-joomla-blog-weergave-tweaken

Ik gebruik een klein img bestand op de intropagina zoals uitgelegd in jouw artikel
https://netspecialist.nl/joomla-kennisbank/137-een-afbeelding-alleen-voor-de-introtekst
Die afbeelding moet ik van opmaak voorzien, dus artikel 461 er bij gehaald.

De aan het .css bestand toe te voegen code krijgt als class
.item img
Ik heb gekozen voor sepia, ziet er prachtig uit!
Citeer
#1 Martin 03-11-2017 14:53
Een mooie toepassing Mindert met CSS.
Hiermee kun je mooie verrassingen op je website laten zien.
Citeer

Plaats reactie

Beveiligingscode
Vernieuwen