Blur-effect met CSS II: Bijschrift aan de linkerkant

Hieronder zie je een foto, met mooi afgeronde hoeken. Aan de linkerkant is er een half-doorschijnend blok waarin een titel staat en een korte beschrijving. Daarnaast is een smalle band te zien waarin de foto is vervaagd.

Op deze pagina wordt beschreven hoe je zoiets maakt. De code kun je downloaden om zelf te gebruiken, echter zonder de foto.

Dit is een bewerking van een deel van script dat ik aantrof in het blad Webdesigner Magazine nr. 98 (september 2017), pagina 18 t.m. 20. Voor deze pagina is één van de drie mogelijkheden uit de code genomen; zie ook de opmerking onderaan deze bladzijde. Voor deze webpagina is de CSS opgeschoond; overbodige zaken zijn verwijderd.
Webdesigner Magazine wordt sinds eind november 2017 niet meer gemaakt.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• De werking van het script
• De code bestaat uit HTML en CSS (in de file styles.css). JavaScript wordt hier niet gebruikt.
   
• HTML
• De HTML bestaat uit een aantal geneste <div>-tags, met daarbinnen nog wat tags en tekst om de bijschriften zichtbaar te maken.
• De buitenste <div>-tag heeft de klassen blur-container en sidebar-caption.
• De klasse blur-container bepaalt de afmetingen van de afbeelding in het document, maakt de afgeronde hoeken en houdt de verder genoemde <div>-tags bij elkaar.
  De klasse sidebar-caption doet hetzelfde voor het bijschrift.
• Binnen de blur-container is er als eerste een <div>-tag met de klasse blur-image. Deze bevat de door CSS vervaagde foto als achtergrond. Deze tag blijft verder leeg.
• Daarna is er een <div>-tag met de klasse sharp-container. Deze houdt de niet-vervaagde foto op de goede plaats. Hierbinnen staat de <div>-tag met de klasse sharp-image. Deze bevat dezelfde foto als blur-image, maar die wordt niet vervaagd. De klassen blur-image en sharp-image liggen bovenop elkaar. Doordat de breedte van sharp-image kleiner is dan de breedte van blur-image ontstaat de vervaagde band.
• Tenslotte is er een <div>-tag met de klasse caption. Die toont het blok met het bijschrift, dat is gemaakt met <h3> en <p>.
   
• CSS
• Praktisch gezien is de gedeeltelijk vervaagde foto opgebouwd uit twee lagen:
  
  1. De vervaagde foto. Dit is de achtergrond van de klasse blur-image.
  2. •  De niet vervaagde foto. Dit is de achtergrond van de klasse sharp-image, die bovenop blur-image ligt, maar minder breed is.
     •  Het bijschrift in de klasse caption, dat aan de linkerkant van blur-image is vastgepind. Doordat de breedte van caption + de breedte van sharp-image kleiner is dan de hoogte van blur-image, ontstaat de (smalle) vage band tussen de scherpe foto en het bijschrift.
   
• De opzet van de CSS lijkt wat chaotisch, maar is logisch als je bedenkt dat de verschillende elementen op elkaar gestapeld liggen en daardoor veel dezelfde eigenschappen hebben.
  Hieronder worden de selectoren per klasse behandeld.
   
• Klasse .blur-container: De breedte is 550px, de hoogte is 500px. De de onder- en bovenmarges zijn elk 20 px en de marges links en rechts zijn 'auto', zodat de foto netjes wordt gecentreerd in het document. De straal van de afronding is 20px. De position is relative, zodat de foto verschijnt op de plaats waar je hem in de HTML neerzet. De overflow is hidden, zodat delen van de foto die uitsteken buiten de weergave worden verborgen.
• Klasse .blur-image: De afmetingen, de marges en de afronding zijn gelijk aan die bij blur-container. De achtergrond wordt ingesteld met een url()-function en wordt horizontaal en verticaal gecentreerd in de weergave geplaatst. De achtergrondfoto wordt met het filter blur() vervaagd. De blur-radius is 5px.
• Klasse .sharp-image: Hiervoor geldt hetzelfde als voor blur-image, zij het dat hier geen filter wordt toegepast. Verderop worden ook nog eigenschappen ingesteld in combinatie met sidebar-caption.
• Klasse .caption: De kleur en de marges worden ingesteld. De lettergrootte van h3 en p voor zover die binnen deze klasse vallen worden ingesteld. Verderop worden ook nog eigenschappen ingesteld in combinatie met sidebar-caption.
• Klasse .sidebar-caption .sharp-container: De eigenschappen van de klasse sharp-container gelden alleen binnen sidebar-caption (er staat geen komma in de selector!). De hoogte is 100%, dat betekent dat 500px wordt geëefd; van blur-container. De breedte is echter 375px. Doordat overflow: hidden is gebruikt, wordt maar een deel van de (scherpe) foto getoond. De vervaagde foto heeft top: 0 en left: 0.
  De position is absolute, maar bedenk dat dit binnen blur-container wordt gerekend.
• Klasse .sidebar-caption .sharp-image: De hier gedefinieerde eigenschappen van de klasse sharp-image gelden alleen binnen sidebar-caption (er staat geen komma in de selector!).Ook hier is position: absolute ingesteld, in combinatie met top: 0 en left: 0.
• Klasse .sidebar-caption .caption: De hier gedefinieerde eigenschappen van de klasse caption gelden alleen binnen sidebar-caption (er staat geen komma in de selector!).
  De hoogte is 100% (van .blur-container), in dit geval dus 500px. De breedte is 120px. Dit blok is aan de linkerkant van .blur-container vastgemaakt (top: 0).
   
• Toepassen in je eigen site
• Regel een mooie foto. Het hoofd-onderwerp van de foto moet ongeveer in het midden (op het snijpunt van de diagonalen) staan.
• Bepaal de hoofdafmetingen van de foto met het effect in je document.
• Download de .zip-file en pak hem uit. Zet de HTML in de head en de body van je document, zoals hieronder is aangegeven.
• Zet het pad naar de foto in de CSS, in de selector .blur-image, .sharp-image.
• Zet de hoogte en de breedte van de container in de selector .blur-container. Zet de breedte ook in .sidebar-caption .sharp-container.
• Zet de hoogte van de scherpe foto in .sidebar-caption .sharp-container
• Zet de hoogte van het onderschrift in .sidebar-caption .caption.
• Pas overige CSS aan, naar je eigen smaak: font-family, font-size, kleuren, marges, paddings, enz.

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

<div class="blur-container sidebar-caption">
  <div class="blur-image"></div>

  <div class="sharp-container">
    <div class="sharp-image"></div>
  </div>
  <div class="caption">
    <h3>Vlinder</h3>
    <p>Opgenomen in de<br>
    Vlindertuin op Texel,<br>&nbsp;<br>
    op 18 mei<br>
    2015</p>
  </div>
</div>

Downloaden:
 
Druk op de knop:  File: voorb591.zip, 933 bytes.

Opmerking:
 
Een variant van dit voorbeeld is: Blur-effect met CSS I: Bijschrift aan de onderkant. Een derde variant is: Blur-effect met CSS III: Ronde uitsnede met bijschrift.