Afbeelding met geblurde achtergrond

Op TV zie je wel eens foto's of filmpjes die lijken te zijn gemaakt met een mobiele telefoon, in staand formaat. Op de achtergrond zie je dan hetzelfde, vergroot en onscherp (geblurd).
Op deze pagina presenteer ik code die zoiets doet met een foto. De code kun je downloaden om zelf te gebruiken, inclusief de afbeelding.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• De code bestaat uit HTML en CSS. JavaScript wordt niet gebruikt.
   
• De werking van het script
• Het script wordt uitgevoerd tijdens het laden van de pagina, daarna doet het niets meer. Vanwege het statische karakter van dit effect is dat ook niet nodig.
• Het effect wordt bereikt met behulp van een viertal geneste <div>-tags, die worden opgemaakt met CSS. Er is één foto, die als achtergrond wordt gebruikt. Zie de figuur.
   
• Het voorbeeld is gemaakt voor een foto met een beeldverhouding van 9:16, in staand formaat. Andere verhoudingen zijn natuurlijk mogelijk, maar het effect is dan al gauw minder mooi.
   
• HTML
• De buitenste <div>-tag heeft de klasse wrapper (groene streepjeslijn). Die positioneert het geheel in de regel en houdt de boel bij elkaar. Daarbinnen bevindt zich, gecentreerd, een <div>-tag met klasse foto (roze). De achtergrond is de (scherpe) foto.
• Binnen foto zijn nog twee <div>-tags, met klasse links respectievelijk rechts (beide grijs). Deze hebben de geblurde foto als achtergrond. De zijden zijn 2× zo groot als die van de foto. Ze zijn symmerisch langs de verticale randen van de foto geplaatst. Delen die buiten de wrapper uitsteken worden door CSS verborgen.
   
• CSS
• De afmetingen die in deze bespreking van de CSS worden genoemd, zijn de werkelijke afmetingen. Voor je eigen toepassing pas je die natuurlijk aan. Dat is geen probleem, zolang de beeldverhouding maar niet verandert.
• De klasse wrapper is 540px breed, dat is 3× de breedte van de foto. De hoogte is 320px, dat is gelijk aan de hoogte van de foto. De positionering in het midden van de regel gaat met margin. Met overflow:hidden wordt alles wat buiten de wrapper uitsteekt verborgen.
• De klasse foto is 180px breed en 320px hoog , dat is gelijk aan de afmetingen van de foto. De positionering in het midden van de wrapper wordt geregeld via margin. De z-index is 2, daardoor ligt de (scherpe) foto boven de klassen links en rechts. De linker en de rechter rand van de foto zijn met border gemaakt.
  De foto staat in de achtergrond van de.
• De klasse linksrechts maakt de twee geblurde delen op. Voor de horizontale positionering worden de klassen links en rechts gebruikt.
• linksrechts maakt de twee geblurde foto's op. De afmetingen zijn elk 360×640px. Ze zijn elk op -50% van de hoogte van wrapper geplaatst. De foto staat in de achtergrond. De z-index is 1, daardoor liggen de (onscherpe) foto's onder de klasse foto. Het blur-effect wordt bereikt met filter:blur(6px).
   
• Toepassen in je eigen site
• Regel een afbeelding met hoogte-breedte verhouding 16 : 9, in staand formaat. Gebruik een fotobewerkingsprogramma om de afmetingen aan te passen. De hoogte van de foto moet gelijk zijn aan de hoogte van het effect op je web-pagina die je wilt gaan maken.
• Download de .zip-file en pak hem uit. Het bestand toon-het-voorbeeld.htm is een werkend voorbeeld.
• Zet de code in je .HTML-bestand zoals hieronder is aangegeven. Vervang de naam van het afbeeldingsbestand in de klassen foto en linksrechts in de CSS. Het gaat om de eigenschap background-image.
• Pas zonodig de afmetingen aan.In het voorbeeld wordt een foto van 180×320 beeldpunten gebruikt. De geblurde delen zijn elk net zo groot, maar 2× vergroot. Als je andere afmetingen wilt gebruiken houd er dan rekening mee dat:
  —   De breedte van wrapper moet 3× de breedte van de foto zijn.
  —   De afmetingen in linksrechts moeten 2× de hoogte resp. de breedte van de foto zijn.
• Als de vergrotingsfactor van het geblurde deel wilt veranderen, moet je de afmetingen van linksrechts, de breedte van wrapper en de waarde van left in links aanpassen.
• Als je vervaging wilt versterken of verzakken, moet de waarde van het blur-filter (in het voorbeeld: 6px) worden verhoogd of verlaagd.
   
• Tenslotte...
• De scherpe en de vervaagde foto's zijn in de klassen gezet met de CSS-eigenschap background-image, maar dat werkt alleen goed als die klassen, in combinatie met filter:blur(), elkaar NIET overlappen. Als die klassen elkaar overlappen moeten <img>-tags worden gebruikt.

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

<div class="wrapper">
  <div class="foto">
    <div class="linksrechts links"></div>
    <div class="linksrechts rechts"></div>
  </div>
</div>

Downloaden:
 
Druk op de knop:  File: voorb821.zip, 21 737 bytes.