Hover-effect met zoom I: omhoog komende foto

Hieronder zie je een paneel met vier foto's. Als je er met de muis over een foto gaat, wordt die een beetje groter, waardoor het lijkt dat de foto naar voren komt. Na een kort moment schuift er een overlay naar boven met daarin een tekst.
Als de muis van de foto af gaat, neemt de foto zijn oorspronkelijke afmetingen weer aan.

Molen

Paddenstoel

Roos

Park

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.

Inspiratie voor deze pagina heb ik opgedaan op www.vermont.eu/en/barbour, zoals die er uit zag op 25 april 2017. Het effect bij 'Collection Preview' heb ik nagebouwd maar is inmiddels verdwenen.

• 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 de overlay in 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="zooming">
        <img src="foto-1.jpg" alt="Molen">
        <div class="textblock">
          Molen
        </div>
      </div>
    </div>
    <div class="cell">
      <div class="zooming">
        <img src="foto-2.jpg" alt="Paddenstoel">
        <div class="textblock">
          Paddenstoel
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="cell">
      <div class="zooming">
        <img src="foto-3" alt="Roos">
        <div class="textblock">
          Roos
        </div>
      </div>
    </div>
    <div class="cell">
      <div class="zooming">
        <img src="foto-4.jpg" alt="Park">
        <div class="textblock">
          Park
        </div>
      </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 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 cell), met daarin twee geneste klassen: zooming en textblock.
• De cell is net even groter dan de foto die er in komt. Daardoor krijg je mooie marges rond de foto.
• De klasse zooming bevat de foto (<img>-tag). De afmetingen zijn gelijk aan de afmetingen van de foto.
• De klasse textblock bevat de overlay-tekst, die naar boven komt schuiven. De breedte is gelijk aan die van de foto, de hoogte is hier 28px, zodat de tekst (16px hoog, zwart, gecentreerd) er goed in past. De verticale uitlijning wordt geregeld door padding-top.
• De overlay (textblock) is binnen zooming gepositioneerd onder de foto. Om te voorkomen dat textblock zichtbaar is als de muis niet boven de foto hangt, heeft zooming de eigenschap overflow:hidden.
   
• Als de muis-pijl boven een foto komt, wordt deze groter. Om dat te bereiken worden er twee acties uitgevoerd:
  
  • De cell waar de foto in zit, wordt naar voren gehaald; de z-index wordt op 50 gezet. Daarmee voorkom je dat de groter wordende foto gedeeltelijk achter de andere foto's verdwijnt.
  • Er wordt een transform uitgevoerd op zooming: de schaal in X- en Y-richting wordt op 1.2 gezet. De foto wordt dus 20% groter. Er wordt geschaald vanuit het middelpunt van de foto (dit is default).
    De transform wordt vloeiend uitgevoerd met behulp van transition. Deze duurt 0.4 seconde en gebruikt ease-out voor een vloeiend effect.
• Tegelijk met het vergroten van de foto wordt de tekst-overlay naar boven geschoven (translateY()), zodat deze zichtbaar wordt. Er is een vertraging van 0.6 seconde ingebouwd om te voorkomen dat de twee effecten elkaar in de weg zitten.
• Als de muis de foto verlaat, verdwijnt de overlay onmiddellijk. De foto krimpt tot zijn oorspronkelijke afmetingen. Dat duurt 0.4 seconde en gebruikt ease-out.
   
• 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. Maak ze een paar pixels (max. 5) groter, dan past het wat lekkerder.
• Maak de afmetingen van de klasse .zooming gelijk aan de afmetingen van de foto. Pas ook de afmetingen van de klassen row en wrapper aan.
• Verander eventueel de afmetingen van de klasse textblock. De width moet gelijk zijn aan de width van de foto. De height hangt af van de font-size. Zet hier desgewenst een ander font bij.
   
• Het groeien/krimpen van de foto gebeurt met transform:scale(). De twee parameters moeten even groot zijn, anders verandert de lengte-breedte verhouding van de foto. De aanpassingen doe je in .zooming:hover.
  De schaal-parameters in .zooming moeten gelijk zijn aan 1.
• De overgang maak je met transition. Voor een rustig effect maak je ze gelijk in .zooming en .zooming:hover.
   
• Het omhoog schuiven van .textblock gebeurt met transform:scaleY(). Bij het openen van de pagina staat het tekstblok onder de foto. Het moet dus omhoog worden geschoven. Dat doe je met een parameter die kleiner is dan nul. Het is een kwestie van een beetje spelen met height, padding-top en font-size om de beste instelling te vinden.
• De animatie wordt geregeld met een transition. De beweging omhoog verloopt met constante snelheid (linear) en duurt 1 seconde. Er wordt 0.6 seconde gewacht met het starten van de beweging, zodat de animatie van de foto zelf is afgelopen voordat het tekstblok gaat schuiven. Een en ander wordt geregeld in .cell:hover .zooming .textblock.
• Het verdwijnen van het tekstblok wordt geregeld in .cell .zooming .textblock. De translatie is even groot als bij het naar boven schuiven, maar het teken is nu positief. De verschuiving duurt 0.1 seconde, zodat het lijkt alsof het tekstblok ineens verdwijnt. Er is geen wachttijd.
   
• De kleur van de tekst en de achtergrond kun je zelf instellen zoals je wilt. Des­gewenst doe je er nog opacity bij.

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: voorb480.zip, 960 bytes.