Hover-effect met zwart-wit foto's II
Hieronder zie je een paneel van 4 foto's. Die staan in zwart-wit. Als je er met de muis overheen gaat, worden ze foto-negatief
en krijgen ze valse kleuren, waardoor het er een beetje eng uitziet. Als de muis van de foto af gaat wordt die weer 'gewoon'
zwart-wit.
Op een aanraakscherm: even vasthouden, buiten de foto tikken om het effect te laten verdwijnen.
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.
Het overvloei-effect (via transition) werkt niet om voor mij onverklaarbare reden. Het beeld verspringt in éeacute;n
stap, zonder overvloei-effect.
- Er worden twee items besproken:
- De werking van het script.
- Inbouwen in je eigen site.
- De werking van het script
- De code bestaat uit CSS en wat HTML. Er komt geen JavaScript aan te pas.
- De CSS staat in de file styles.css. Om de opmaak van het paneel en/of de werking van het effect aan te passen moet
je die veranderen.
- De vier foto's worden bij elkaar gehouden door een wrapper. Deze dient om het blok bij elkaar te houden en op de pagina te positioneren. De hoogte en breedte moet je aanpassen, zodanig dat je eigen foto's (met marges) er goed in passen.
- Binnen de wrapper is een 'table' gebouwd met behulp van <div>-tags.
- Binnen de wrapper zijn twee (horizontale) rijen (klasse row).
- Elke rij bevat twee 'cellen' (klasse photoEffect).
- De 'cellen' zijn net even groter dan de foto die er in komt. Daardoor krijg je mooie marges rond de foto.
- Elke cel heeft een eigen -unieke- klasse p11, p12, p21 of p22. Die dienen uitsluitend om de
foto's als achtergrond-afbeelding in de tabel-cellen te plaatsen. De hover-effecten werken alleen op photoEffect.
- De foto's zijn kleurenfoto's. Bij het laden van de pagina worden de kleuren omgezet in grijstinten. Dat gebeurt met het CSS-filter grayscale(100%).
- Als de muis over een foto gaat, wordt het filter grayscale vervangen door de filters invert(100%) en rotate-hue(270deg).
Hierdoor wordt de foto eerst kleuren-negatief (zonder het bekende rode 'masker') en vervolgens wordt de kleuren-cirkel over
270° gedraaid.
De kleurencirkel (Hue-Saturation-Lightness systeem) wordt besproken in het item Kleurcodes voor tekst, links en achtergrond. - De kleuren veranderen met een transition, die 3 seconden duurt. Daar is wat vreemds mee: In deze toepassing wordt de transition genegeerd door alle grote browsers, ook met een vendor-prefix, behalve door Edge voordat die Chromium ging gebruiken. Edge voert de transition alleen uit op hue-rotate. Dat geeft hier een leuk effect.
- Als de muis de foto verlaat, springt de foto terug naar de oorspronkelijke zwart-wit foto. Dat gaat in één
stap, er is geen overgang.
- Inbouwen in je eigen site
- Download de .zip-file en neem de code op in het HTML-bestand, zoals hierboven en hieronder is aangegeven.
- Neem de foto's op in de CSS-code, in de klassen p11, p12, p21 en p22.
- Zorg ervoor dat de foto's even groot zijn. Zo nodig pas je dat aan met een fotobewerkingsprogramma of iets dergelijks.
- Neem de afmetingen van je foto's (height, width) over in de klasse photoEffect. Maak photoEffect een paar pixels (max. 5) groter, dan krijg je mooie marges.
- Pas de afmetingen van row en wrapper, zodanig dat de foto's er goed in passen.
- Door een beetje te spelen met de CSS van het hover-effect kun je een effect bereiken dat het beste past bij je smaak en bij je site.
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>
(Zet dit in de <HEAD>).<link rel="stylesheet" href="styles.css">(Zet dit in de <BODY> op de plaats waar het paneel
met de plaatjes moet verschijnen).<div class="wrapper">
<div class="row">
<div class="photoEffect p11"></div>
<div class="photoEffect p12"></div>
</div>
<div class="row">
<div class="photoEffect p21"></div>
<div class="photoEffect p22"></div>
</div>
</div>Downloaden:
Druk op de knop:File: voorb481.zip, 769 bytes.
Opmerking:
Meer informatie over filter() vind je in het item Over filter() in CSS.
Het item Hover-effect met zwart-wit foto's toont iets vergelijkbaars met dit, maar dan zonder de kleurveranderingen van het origineel.
html-481; Laatste wijziging: 2 april 2022
