Geanimeerd hover-effect met CSS
Hieronder zie je twee foto's. Als je er met de muis overheen gaat, verandert er iets.
Op deze bladzijde beschrijf ik hoe je zoiets kunt aanpakken. De code van het voorbeeld kun je downloaden om zelf te gebruiken.
De foto's zijn er niet bij, die moet je zelf toevoegen.
Dit is een vrije bewerking van een item dat ik heb aangetroffen in Webdesigner Magazine nr. 74 (2015) pag. 54 e.v.
Dit blad wordt sinds november 2017 niet meer gemaakt.
Het oorspronkelijke artikel en de code zijn op internet niet meer te vinden. Het enige dat ik er over weet is dat het is gemaakt
door Neil Pearce, een designer uit Essex, Engeland.
- Besproken worden:
- De werking van het script, in algemene termen.
- Inbouwen in je eigen site.
- De werking van het script
- Het oorspronkelijke script is niet meer beschikbaar, zie hierboven. Voor deze website zijn een paar bugjes gerepareerd. Overbodige zaken zijn verwijderd.
- De code bestaat uit HTML en CSS. Er komt geen JavaScript aan te pas.
- De CSS staat in het bestand style474.css. Deze naam heeft te maken met het beheer van deze website, je kunt er
elke naam voor kiezen die je wilt. Je linkt de file in de <head>-sectie van je webdocument. Meestal zul je deze
file moeten wijzigen voor je eigen toepassing.
- De HTML staat in de <body>, en bestaat uit een aantal geneste <div>-tags.
- De buitenste <div> heeft id="wrapper". Deze dient om ruimte te maken voor het effect en
om er voor te zorgen dat het netjes staat gepositioneerd in je document. Hier is het 500px breed, en gecentreerd
in de regel.
Als je een kop boven het effect wilt maken, doe je dat helemaal boven in dit blok. - Binnen wrapper ligt de klasse block. Deze is niet breder dan wrapper, maar ook niet smaller dan
de onderliggende klassen. Hier is het 200px. In de praktijk kan dat te weinig blijken te zijn, je kunt het gewoon
breder maken, maar niet breder dan wrapper.
- Binnen block ligt een <div>-tag met de klassen item-hover, square, effect en left_to_right. De naam van de laatste klasse geeft aan dat het effect links begint en naar rechts beweegt.
- Er ik ook een tweede, vergelijkbare div, die echter de klassen right_to_left heeft. Het effect begint
dan rechts en beweegt naar links.
- De foto's hebben de klasse img. Deze maak je het beste niet kleiner dan 200px × 200px, anders wordt het
effect minder fraai.
- In het CSS-bestand vind je definities voor .item-hover.square en .item-hover.square .img. De breedte maak
je het beste gelijk aan de breedte van de klasse block.
De hoogte en de breedte moeten gelijk zijn, tenzij je een rechthoekige foto wilt. Zorg wel dat de afmetingen van item-hover.square en item-hover.square .img gelijk zijn, anders kan het effect verloren gaan.
- Als je met de muis over een foto gaat, verschuift deze en wordt geschaald naar 50% van de oorspronkelijke afmetingen.
Tegelijkertijd wordt er een blok met informatie zichtbaar. Dat heeft de klasse info. De afmetingen worden bepaald
door .item-hover.square.
- De opmaak van het info-blok regel je in de CSS, en wel in de klassen .item-hover.square.effect .info,
.item-hover.square.effect .info h3 en .item-hover.square.effect .info p.
- De foto en het info-blok staan binnen een <a>-tag. Om te voorkomen dat een muisklik tot rare effecten leidt, zijn de mouse-events uitgeschakeld met pointer-events:none;. Verder verandert de cursor-pijl niet in een handje: cursor:default;.
- De buitenste <div> heeft id="wrapper". Deze dient om ruimte te maken voor het effect en
om er voor te zorgen dat het netjes staat gepositioneerd in je document. Hier is het 500px breed, en gecentreerd
in de regel.
- Bij deze uitvoering staan de foto's onder elkaar. Dat geeft het mooiste effect. Je zou ze eventueel naast elkaar kunnen
zetten, maar dan lopen de effecten door elkaar heen.
- Inbouwen in je eigen site
- Zet de code in je webdocument zoals hieronder is aangegeven.
- Voeg je eigen foto's toe in de HTML.
- De klassen item-hover square effect left_to_right en item-hover square effect right_to_left (binnen de klasse block) kunnen net zo vaak herhaald worden als je zelf wilt.
- Maak de nodige wijzigingen in de CSS: Kleur van tekst en achtergrond, binnen-marges (padding), Kleur en breedte
van de randen, enz.
- Bij deze uitvoering verdwijnen de foto's half onder het info-blok. Je kunt ze ook helemaal zichtbaar laten blijven.
Verwijder daarvoor de opdracht z-index:-5 uit de klassen .item-hover.square.effect.left_to_right .img en
.item-hover.square.effect.right_to_left .img .
Wees er op bedacht dat de foto's dan de tekst van het info-blok (gedeeltelijk) kunnen bedekken.
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="style474.css">
(Zet dit in de <BODY> op de plaats waar het effect moet verschijnen).
<div id="wrapper">
<div class="block">
<!-- Links naar rechts -->
<div class="item-hover square effect left_to_right">
<a href="#">
<div class="img">
<img src="animate01.jpg" alt="Over deze site">
</div>
<div class="info">
<h3>Over deze<br>website</h3>
<p>Deze website is 100% hobby-werk.<br>
Het meeste wordt 's avonds gemaakt.</p>
</div>
</a>
</div><!-- Einde item-hover -->
<!-- Rechts naat links -->
<div class="item-hover square effect right_to_left">
<a href="#">
<div class="img">
<img src="animate02.jpg" alt="Onze licenties">
</div>
<div class="info">
<h3>Onze licenties</h3>
<p>Alles op deze site kun je gebruiken in je eigen project.<br>
Het is gratis.</p>
</div>
</a>
</div><!-- Einde item-hover -->
</div><!-- block -->
</div><!-- wrapper -->
Downloaden:
Druk op de knop:
File: voorb474.zip, 1379 bytes.
