Hover-effect met overlay
Hieronder zie je een paneel met vier foto's. Als je er met de muis overheen gaat, komt er een overlay over de foto met een tekst. Als de muis van de foto af gaat, verdwijnt de overlay weer.
Op deze pagina wordt beschreven hoe je zoiets maakt. De code kun je downloaden om zelf te gebruiken, echter zonder de plaatjes. Die moet je zelf toevoegen.
Inspiratie voor deze pagina heb ik opgedaan op www.rtrn.nl/werk/, zoals die er uit zag op 19 april 2017. Daar heb ik zelf nog wat versiering aan toegevoegd.
- Er worden twee items besproken:
- De werking van het script.
- Inbouwen in je eigen site.
- De werking van het script
- De code bestaat uit CSS en wat HTML. JavaScript wordt niet gebruikt.
- De CSS staat in de file styles.css. Om je eigen foto's er in te zetten en/of de opmaak van de overlay aan te passen moet je die veranderen.
- De HTML bestaat uit een set geneste<div>-tags, met onderstaande structuur:
<div class="wrapper">
<div class="row">
<div class="overlayed p11">
<div class="hoverEffect">Molen</div>
</div>
<div class="overlayed p12">
<div class="hoverEffect">Paddenstoel</div>
</div>
</div>
<div class="row">
<div class="overlayed p21">
<div class="hoverEffect">Roos</div>
</div>
<div class="overlayed p22">
<div class="hoverEffect">Park</div>
</div>
</div>
</div>
- De vier foto's worden bij elkaar gehouden door een wrapper. Deze dient om het blok bij elkaar te houden en op de pagina te positioneren. De hoogte en breedte moet je aanpassen, zodanig dat je eigen foto's (met marges) er goed in passen.
- Binnen de wrapper is een 'table' gebouwd met behulp van <div>-tags.
- Binnen de wrapper zijn twee (horizontale) rijen (klasse row).
- Elke rij bevat twee 'cellen', met daarin elk een foto. Elke cel heeft een overlay (klasse overlayed) met een eigen tekst. Daarnaast heeft elke cel een (unieke) klasse: p11, p12, p21, en p22. Elk van deze klassen bevat een foto als achtergrond-afbeelding.
- Elke cel heeft een klasse hoverEffect, die wordt gebruikt voor de animatie. Als de muis boven een foto zweeft,
wordt de overlay zichtbaar door de pseudo-klasse hoverEffect:hover.
- De overlay (hoverEffect) is niet helemaal wit en gedeeltelijk doorzichtig (opacity:0.7. De rand is wel echt wit en is niet doorzichtig. Dat geeft een mooi effect.
- De opacity van de klasse hoverEffect als geheel is nul en is dus niet zichtbaar. Als de muis er boven
zweeft wordt deze op één gezet. Dat gebeurt in een tijdsbestek van 1 seconde, met ease. Zie ook
Over transitions.
- Inbouwen in je eigen site
- Download de .zip-file en neem de code op in je HTML-bestand, zoals hierboven en hieronder is aangegeven.
- Neem de foto's op in de klassen p11 t.m. p22. Zorg ervoor dat ze even groot zijn. Zo nodig pas je dat aan met een fotobewerkingsprogramma of iets dergelijks.
- Neem de afmetingen van de foto's (height, width) over in de klasse overlayed. Maak ze een paar pixels (max. 5) groter, dan past het wat lekkerder.
- Pas ook de afmetingen van de klassen row en wrapper aan.
- Verander eventueel de afmetingen in de klasse hoverEffect. Zorg ervoor dat width + 2 × left en height + 2 × top allebei gelijk zijn aan 100%.
- Pas de transition aan aan je eigen wensen. Laat de verwijzing naar opacity ongemoeid.
- Het uiterlijk van de overlay kun je veranderen door in hoverEffect de eigenschappen background-color, box-shadow en border te veranderen. box-shadow en border zou je ook weg kunnen laten.
- De opmaak van de tekst kun je veranderen door in hoverEffect de eigenschappen text-align (raad ik niet aan),
line-height, color, font-size en font-weight aan te passen.
- Tenslotte:
- Je kunt van de titels op de overlays eenvoudig hyperlinks maken door de tekst uit te breiden tot anchor-tags (<a>).
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 paneel met foto's moet verschijnen; zie ook de code eerder op deze pagina).
<div class="wrapper>
.
.
HTML-code, zie hierboven
.
.
</div>
Downloaden:
Druk op de knop:
File: voorb479.zip, 866 bytes.
