Hover-effect met zwart-wit foto's
Hieronder zie je een paneel van 4 plaatjes. Die staan in zwart-wit. Als je er met de muis overheen gaat, krijgen
ze kleur. Daarna worden ze weer zwart-wit.
Op deze pagina wordt beschreven hoe je zoiets maakt. De code kun je downloaden om zelf te gebruiken, echter zonder de plaatjes.
Die moet je zelf toevoegen.
Vanaf EdgeHTML 13 (na de eerste grote update van Windows 10) wordt het geacht te werken. In EdgeHTML 14 werkt het zeker.
Voor sommige browsers is de vendor-prefix -webkit- nodig.
Inspiratie: Webdesigner Magazine nr. 75 (april 2015) pag. 69.
Dit blad wordt sinds november 2017 niet meer gemaakt.
- Er worden twee items besproken:
- De werking van het script.
- Inbouwen in je eigen site.
- De werking van het script
- De foto's zijn kleurenfoto's. Bij het laden van de pagina worden de kleuren omgezet in grijstinten.
- Als de muis over de foto's gaat, worden de grijstinten weer teruggezet naar de oorspronkelijke kleuren.
- De foto's (<img>-tags) worden op de pagina gepositioneerd met behulp van <div>-tags, zie de code onderaan de pagina.
- De foto's die het effect hebben, zijn allemaal kleurenfoto's. Ze hebben allemaal de klasse grijs. De CSS zet er
een filter overheen die de foto omzet:
filter:grayscale(100%). Hierdoor verdwijnt de kleur.
Deze aanpak zorgt ervoor dat de foto's gewon kleurenfoto's zijn in browsers die filter() niet ondersteunen. - Als de muis boven een gefilterde foto komt, wordt het filter verwijderd. Dat wordt geregeld via de pseudo-klasse grijs:hover.
- Voor de overgangen van wel gefilterd naar niet gefilterd en weer terug wordt een transition
gebruikt.
- Om de foto's bij elkaar te houden zijn ze omsloten door een wrapper. Dit is een gewone <div>-tag, die
ook zorgt voor de centrering op het scherm.
Op deze plaats is de 'oude' HTML 4 aanpak <div align="center"> gebruikt. Dat is hier de eenvoudigste oplossing.
- Inbouwen in je eigen site
- Set de code in je webdocument zoals hier onder is aangegeven.
- De CSS hoef je niet te veranderen. Eventueel kun je de snelheid van het effect veranderen in de transition.
- Neem de plaatjes allemaal even groot, dan krijg je een mooi regelmatig beeld. Geef in elk geval height en width
op in de <ig>-tag van ieder plaatje. Dan ben je zeker dat de plaatjes in alle browsers correct op het scherm
worden gezet.
- Het aantal rijen en kolommen hoeft niet gelijk te zijn. Vier rijen met elk drie plaatjes kan ook.
Voeg voor elke nieuwe rij een <div> … </div> toe.
Voeg voor elke nieuwe kolom een nieuwe <img> toe aan elke rij. - Houd het aantal kolommen gelijk in elke rij. Dat voorkomt een "rafelrand" aan de rechterkant.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
.grijs {
filter: grayscale(100%);
transition: all 0.6s ease;
}
.grijs:hover {
filter: grayscale(0%);
transition: all 0.6s ease;
}
</style>
(Zet dit in de <BODY> op de plaats waar het paneel
met de plaatjes moet verschijnen).
<div align="center">
<div>
<img src="plaatje0.jpg" alt="Molen"
height="187" width="250" border="0" class="grijs">
<img src="plaatje1.jpg" alt="Paddestoel"
height="187" width="250" border="0" class="grijs">
</div>
<div>
<img src="plaatje2.jpg" alt="Roos"
height="187" width="250" border="0" class="grijs">
<img src="plaatje3.jpg" alt="Park"
height="187" width="250" border="0" class="grijs">
</div>
</div>
Downloaden:
Druk op de knop:
File: voorb476.zip, 438 bytes.
Opmerking:
Meer informatie over filter() vind je in het item Over filter() in CSS.
Het item Hover-effect met zwart-wit foto's II toont iets vergelijkbaars met dit,
maar dan met kleurveranderingen in het origineel.
