Vervaagde afbeelding met rond detail er bovenop
Hierboven zie je een vervaagde foto die is geplaatst als pagina-kop. Bovenop de foto ligt dezelfde foto, maar dan scherp en
iets verkleind, in een cirkelvormige uitsnede.
Op deze pagina wordt getoond hoe je zoiets kunt maken voor je eigen website. De code kun je downloaden om zelf te gebruiken,
maar zonder de foto.
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in je eigen site.
- Inspiratie voor dit item is ontstaan door een site op internet die inmiddels niet meer bestaat. Het lijkt ook wel wat op het inlogscherm van Microsoft Windows 10 en 11. Voor deze pagina heb ik iets nagebouwd wat er op lijkt.
- De code bestaat uit HTML en CSS. JavaScript wordt hierbij niet gebruikt.
- De werking van het script
- De code van het voorbeeld bestaat uit HTML en CSS, die bij het laden van de pagina direct wordt uitgevoerd. JavaScript
wordt niet gebruikt.
- HTML
- De HTML van het voorbeeld bestaat uit één enkele <div>-tag met de klasse wrapper, die dient om de vervaagde foto en de ronde uitsnede te positioneren in het document en ten opzichte van elkaar.
- Binnen de wrapper staan de foto's in <img>-tags, met de klasse Achtergrond resp. Cirkel. Beide <img>-tags gebruiken hetzelfde beeldbestand.
- De klasse Achtergrond positioneert de vervaagde achtergrond binnen de wrapper en zorgt dat de achtergrond achter de ronde uitsnede ligt, en voor het vervagen.
- De klasse Cirkel positioneert de iets verkleinde voorgrond binnen de wrapper.
- CSS
- De klasse wrapper positioneert de foto's in het document. De afmetingen (breedte ×hoogte) zijn: 600 ×
240 beeldpunten. Het wordt gecentreerd met margin:0 auto;.
Omdat de foto hoger is dan de wrapper, is het nodig om de uitstekende delen te verbergen. Daarvoor is overflow:hidden; gebruikt. - De klasse Achtergrond, die alleen geldt voorimg-tags, positioneert de foto bnnen de wrapper. Om het
gewenste deel van de foto zichtbaar te krijgen, is —voor deze foto&mdash ; top:-150px; gebruikt.
Omdat de foto in principe smaller of breder is dan de wrapper, is width:100%; ingesteld. Bij smallere foto's kan de foto vertekend en/of onscherp worden. - De achtergrondfoto wordt achter de cirkel gehouden met z-index:-1; en wordt vervaagd met behulp van filter:blur(8px).
- De klasse Cirkel, die alleen geldt voorimg-tags, positioneert de ronde uitsnede van de foto binnen de wrapper.
Om de cirkel in het midden te krijgen is margin:30px auto; gebruikt. Om voor mij onduidelijke reden werkt margin:auto;
niet. De grootst mogelijke diameter van de cirkel is ingesteld op 30%. Hierdoor wordt ook de foto kleiner. De hoogte past
zich automatisch aan met height:auto;.
Om de foto zichtbaar te maken is display:block nodig.
- Toepassen in je eigen site
- Regel een geschikte foto. Zorg ervoor dat de foto even hoog als breed (dus vierkant) is. Gebruik desnoods een programma voor fotobewerking om da voor elkaar te krijgen. De foto is het beste even breed als de wrapper. Dat vereenvoudigt het plaatsen van de cirkel binnen de wrapper.
- Download de .zip-file en pak hem uit. Bouw de code op zoals hieronder is aangegeven.
- Zet de bestandsnaam in de img-tags.
- Pas de positie en zo nodig de afmetingen van de wrapper aan.
- Positioneer de achtergrondfoto in de wrapper door top en eventueel ook left aan te passen. Wijzig de parameter in de aanroep van het blur()-filter, zodat de achtergrond voor jouw toepassing goed is.
- Positioneer de cirkel in de wrapper. Pas desgewenst de grootte aan door max-width te veranderen.
- Tenslotte...
- Het is niet nodig dat de achtergrond foto en de foto in de cirkel gelijk zijn. Je kunt hier gewoon een andere foto voor gebruiken.
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>).
<style>
.wrapper {
position:relative;
top:0; left:0;
width:600px; height:240px;
margin:0 auto;
overflow-y:hidden;
}
img.Achtergrond {
position:absolute;
top:-150px; left:0;
width:100%;
z-index:-1;
filter:blur(8px);
}
img.Cirkel {
border-radius:50%;
display:block;
margin:30px auto;
height:auto;
max-width:30%;
}
</style>
(Zet dit in de <BODY> op de plaats waar Het effect moet verschijnen.)
<div class="wrapper">
<img class="Achtergrond" src="foto.jpg">
<img class="Cirkel" src="foto.jpg">
</div>
Downloaden:
Druk op de knop:
File: voorb759.zip, 503 bytes.
Opmerking:
Als je niet wilt dat de foto in de cirkel kleiner wordt kun je ook de aanpak gebruiken in het item
Blur-effect met CSS III: Ronde uitsnede met bijschrift.
