Blur-effect met CSS III: Ronde uitsnede met bijschrift

Hieronder zie je een vervaagde foto, met mooi afgeronde hoeken. In het midden is er een cirkel waarin de foto scherp is. Linksonder staat een half-doorschijnend blok waarin een titel staat en een korte beschrijving.

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 klasse blur-container.
• 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.
  
• 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 circle-container. Deze houdt de niet-vervaagde foto op de goede plaats. Hierbinnen staat de <div>-tag met de klasse circle-image. Deze bevat dezelfde foto als blur-image, maar die wordt niet vervaagd. De klassen blur-image en circle-image liggen bovenop elkaar.
• 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 circle-image, die bovenop blur-image ligt, maar maar andere afmetingen heeft.
     •  Het bijschrift in de klasse caption, dat aan de linkerkant van blur-container is vastgepind.
   
• 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 .circle-image: Hiervoor geldt hetzelfde als voor blur-image, zij het dat hier geen filter wordt toegepast.
• Klasse .caption: De kleur en de marges worden ingesteld. De lettergrootte van h3 en p voor zover die binnen deze klasse vallen worden ingesteld.
   
• 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, .circle-image.
• Zet de hoogte en de breedte van de container in de selector .blur-container. Zet de breedte ook in .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">
  <div class="blur-image"></div>

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

Downloaden:
 
Druk op de knop:  File: voorb592.zip, 849 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 II: Bijschrift aan de linkerkant.