WPNews.nl

CSS afbeelding hover grijstoon

De CSS op deze pagina is niet bedoeld voor een specifiek WordPress-thema of een specifieke plug-in, maar kan op elke WordPress-website worden toegepast.

Hou er rekening mee dat de manier om de CSS-code of klassen te integreren voor elke websitebouwer enigszins verschilt. Het is ook waar dat je overal gewone CSS-code kunt integreren, maar niet elke websitebouwer staat toe om met CSS-klassen te werken. Site (pagina)bouwers zoals Kadence Pro, GenerateBlocksPro, Elementor Pro hebben allemaal opties om CSS-klassen te gebruiken.

CSS-code voor grijswaarden afbeelding bij hover (1)

Een van de mooiste en rustigste (stijlvolle) effecten op een website is het gebruik van een CSS-code die een afbeelding omzet in een grijstoon afbeelding als de bezoeker er met de muis overheen beweegt.
Je kunt de percentages (%) in deze CSS-code naar wens aanpassen.
Belangrijk: Deze code is van toepassing op alle afbeeldingen op de website. Als je dat niet wilt, kun je de CSS-code van (2) of (3) toepassen.
/* CSS code voor grijstoon image bij hover (1)*/
img {
  transition: filter .5s ease-in-out;
  -webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(0%); /* FF 35+ */
}

img:hover {
  -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(100%); /* FF 35+ */
}

CSS-code voor grijswaarden afbeelding bij hover (2)

Dit is bijna dezelfde code, maar maakt gebruik van een CSS-klasse. Dit betekent dat je zelf kunt bepalen welke afbeeldingen het beïnvloedt.
Je kunt de percentages (%) in deze CSS-code naar wens aanpassen.
Belangrijk: Deze code is NIET van toepassing op alle afbeeldingen op de website. Je plaatst de code in Extra CSS of en code plugin. Elke afbeelding waarop je dit effect wilt toepassen, moet de klasse grayscalebas hebben.
/* CSS code voor grijstoon image bij hover (2)*/
.grayscalebas img {
  transition: filter .5s ease-in-out;
  -webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(0%); /* FF 35+ */
}

.grayscalebas img:hover {
  -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(100%); /* FF 35+ */
}

CSS-code voor grijswaarden afbeelding bij hover (3)

De onderstaande code doet vrijwel hetzelfde als de code hierboven, maar bereikt dit op een iets andere manier.
Uiteraard kan je de decimale waarden van transparantie/dekking in deze CSS naar wens aanpassen.
Belangrijk: Deze code is NIET van toepassing op alle afbeeldingen op de website. Elke afbeelding waarop je dit effect wilt toepassen, moet de klasse 
grayscalebas3 hebben.
/* CSS code voor grijstoon image bij hover (3)*/
.grayscalebas3 img {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
opacity: 1;
}
.grayscalebas3 img:hover {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: 0.9;
}

Deze illustratie toont het effect van een afbeelding met de CSS code grijswaarden afbeelding bij hover (2).

Translate »