Uitklappende bijschriften bij foto's

Hier onder zie je een foto. Als je er met de muis overheen gaat, klapt er een blok uit met een bijschrift dat de foto voor de helft bedekt. De foto zelf schuift daarbij een kwart van de breedte naar rechts en wordt aan de rechterkant voor een kwart van de breedte afgekapt.
Op een aanraakscherm tik je op de foto om het bijschrift zichtbaar te maken en tik je buiten de foto of op de (dummy-)link om het bijschrift te verbergen.
Op deze pagina wordt uitgelegd hoe je zoiets maakt. De code kun je downloaden om zelf te gebruiken, echter zonder de foto.

Dit is een vrije bewerking van code door Neil Pearce, die is beschreven in Webdesigner Magazine nr. 61 (nov. 2013), pag. 56 t.m. 59. Dit blad wordt sinds eind november 2017 niet meer gemaakt.
De originele code is —voor zover mij bekend— niet meer beschikbaar op internet.
Voor de toepassing op deze site is de code opgeschoond en hier-en-daar aangepast aan de groott van de foto.

• Er worden twee items besproken:
  1. De werking van het script, in algemene termen.
  2. Inbouwen in je eigen site.
   
• De werking van het script
• De code bestaat uit HTML en CSS. Er komt geen JavaScript bij kijken.
• De HTML heeft de volgende structuur (Zie onderaan de bladzijde):
  
  • Het geheel is verpakt in een ongeordende lijst (<ul>), met de klassen grid en ca-style.
  • De ul heeft maar één list-item. Dat is zo omdat er maar één foto is. Als je meer foto's zou willen toevoegen, dan doe je dat door list-items toe te voegen aan de ul. In dat geval zal de browser zoveel foto's naast elkaar te zetten als mogelijk is, daarna wordt een nieuwe rij foto's gemnaakt.
  • De klasse grid regelt de plaatsing van de foto's in het document. Dit gedraagt zich als een echt grid, het is ook nog responsive. Wel moeten er wijzigingen in de CSS worden aangebracht als de foto's breder worden dan hier is gebruikt.
  • De klasse ca-style regelt de animatie van de foto-bijschriften.
• Elk list-item bevat een <figure>-tag, die werkt als wrapper voor de foto en het bijschrift. Deze tag bevat de volgende zaken:
  
  • Een <div>-tag met daarbinnen een <img>-tag voor de foto. De div dient om het rechter deel van de foto te verbergen door middel van overflow:hidden. De attributen alt en/of title mogen achterwege worden gelaten.
  • Een <figcaption>-tag, die werkt als wrapper voor de animatie van het bijschrift. Deze tag bevat:
    
    • Een <h3>-tag. Dit is de titel-kop van het bijschrift.
    • Een <span>-tag. Deze bevat de broodtekst van het bijschrift.
    • Een <a>-tag. Hiermee kun je de gebruiker naar een andere webpagina sturen. De link heeft een hover-animatie via de klasse btn_hover.
    Deze drie zaken kunnen elk naar keuze worden weggelaten.
 
• De CSS lijkt ingewikkeld, vanwege het grote aantal selectors. Toch is het eenvoudiger dan het lijkt.
• Er is een selector voor de klasse grid. Daarbij horen de selectors voor het gedrag en de opmaak van de tags die zich binnen het bereik van grid bevinden.
• Er is een selector voor de klasse ca-style. Daarbij horen de selectors voor het gedrag en de opmaak van de tags die zich binnen het bereik van ca-style bevinden.
• De link-button die in het bijschrift staat, verandert van kleur als je er overheen gaat met de muis. Dat wordt apart opgemaakt met .btn_hover:hover.
• Essentieel is dat je box-sizing: border-box; gebruikt, anders werkt het niet goed. In de CSS staat dat bovenaan.
   
• Inbouwen in je eigen site
• Download de code en pak hem uit. Zoek een of meerdere foto's uit om toe te passen op je site. De foto's moeten allemaal even groot zijn.
• Zet de code in je HTML-document
• Stel de breedte van de foto's in. Dat doe je in de CSS, binnen de selector .grid li, de eigenschap is width.
• Het aantal foto's wat naast elkaar kan staan bepaal je met max-width, binnen de selector .grid. Dit is minimaal gelijk aan de 2 × padding + width, in de selector .grid li.
  In het voorbeeld is max-width gelijk aan 600px voor de foto van 250px breed en 15px padding is dat meer dan genoeg. Je kunt met deze instellingen twee foto's naast elkaar zetten (2 × (250 + 2 × 15) = 560px < 600px. Om meer foto's van 250px breed naast elkaar te zetten moet je max-width dus groter maken.
• Pas de kleuren en de animaties aan naar je eigen inzicht.

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 de foto moet verschijnen).

<ul class="grid ca-style">
<li>
  <figure>
    <div><img src="foto.jpg" alt="Roos" title="Roos"></div>
    <figcaption>
      <h3>Roos</h3>
      <span>Roze, achtertuin</span>
      <a href="" class="btn_hover">Ben's Online Fotoalbum</a>
    </figcaption>
  </figure>
</li>
</ul>

Downloaden:
 
Druk op de knop:  File: voorb306.zip, 1129 bytes.