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.

Vlinder

Opgenomen in de Vlindertuin op Texel,
op 18 mei 2015

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.

Gebruik:

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: Download deze code  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.

 
terug

html-592; Laatste wijziging: 17 mei 2020