Hover-effect met omkleurende foto

Hieronder zie je een paneel met vier uitvoeringen van dezelfde foto. Als je de foto linksboven aantikt of er met de muis overheen gaat, wordt het een verkleurde zwart-wit foto (sepia). Bij de andere foto's gebeurt hetzelfde, maar dan met andere kleuren.
De zwart-wit foto wordt ingekleurd, maar met één kleur. De Engelse term is "colorize".

Op deze pagina wordt uitgelegd hoe je dit voor elkaar krijgt. De code kun je downloaden om zelf te gebruiken, behalve de foto. Daar moet je zelf voor zorgen.   

• Er worden twee items besproken:
  1. De werking van het script.
  2. 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 het effect aan te passen moet je die veranderen.
   
• De HTML bestaat uit een set geneste <div>-tags, met onderstaande structuur:
   
  <div class="wrapper">
  <div class="row">
    <div class="cell">
      <div class="p11">
        <img src="foto-1.jpg" alt="Molen">
      </div>
    </div>
    <div class="cell">
      <div class="p12">
        <img src="foto-1.jpg" alt="Molen">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="cell">
      <div class="p12">
        <img src="foto-1" alt="Molen">
      </div>
    </div>
    <div class="cell">
      <div class="p22">
        <img src="foto-1.jpg" alt="Molen">
      </div>
    </div>
  </div>
</div>
   
• 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 precies 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 cell), met daarin de klassen: p11, p12, p21 en p22.
• De cell is precies even groot als de foto die er in komt.
   
• Het ligt voor de hand om van de foto's eerst een zwart-wit foto te maken met behulp van filter:grayscale(100%), om daarna de kleurencirkel (HLS-systeem) te verdraaien. Dit werkt echter niet, omdat filter:grayscale(100%) alle kleur-informatie uit de foto verwijdert. Daarom wordt een kunstje uitgehaald:
  
  • Eerst wordt de foto zwart-wit gemaakt, met de geel-bruine kleurzweem die oude foto's kenmerkt. Zie de foto linksboven.
    Dat gebeurt met filter:sepia(100%). De noodzakelijke kleur-informatie blijft nu behouden in de afbeelding.
  • Vervolgens wordt de kleurencirkel verdraaid met filter:hue-rotate()
• De implementatie is als volgt:
  
  • Als de muis-pijl boven een van de foto's komt, wordt het CSS filter sepia(100%) er op uitgevoerd. Dit wordt geregeld met de pseudo-klasse cell:hover.
  • Als de muis-pijl boven een van de andere foto's (met class="p12", "p21", "p22";) komt, wordt het CSS filter hue-rotate() er op uitgevoerd. De foto dan al omgezet in sepiakleur, omdat de muis boven cell zweeft. Dat wordt geregeld met de pseudo-klassen p12:hover, p21:hover en p22:hover. Die verdraaien de kleurencirkel over 90°, 180° resp. 270°.
    Opmerking: De pseudo-klasse p11:hover staat er voor de volledigheid bij, maar wordt niet gebruikt.
    Opmerking: Zie het item Kleurcodes voor tekst, links en achtergrond voor een beschrijving van de kleurencirkel.
• Als de muis de foto verlaat gaat die terug naar zijn oorspronkelijke toestand. Op een aanraakscherm blijft het effect staan totdat het scherm 'ergens' anders wordt aangeraakt.
   
• Inbouwen in je eigen site
• Download de .zip-file en neem de code op in je HTML-bestand, zoals hierboven en hieronder is aangegeven.
• Neem de foto's op in de <img>-tags. Zorg ervoor dat ze 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 cell.
• Pas ook de afmetingen van de klassen row en wrapper aan.
   
• In het voorbeeld worden geen vloeiende overgangen (transitions) gebruikt. Dat kan natuurlijk wel. Laat de transition bij voorkeur tegelijkertijd werken op hue-rotate() en sepia() en niet na elkaar.

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>).

<link rel="stylesheet" href="styles.css">

(Zet dit in de <BODY> op de plaats waar het paneel met foto's moet verschijnen; zie ook de code eerder op deze pagina).

<div class="wrapper>
  .
  .
  HTML-code, zie hierboven
  .
  .
</div>

Downloaden:
 
Druk op de knop:  File: voorb483.zip, 739 bytes.