Als je een mooie button wilt maken kun je dat prima met CSS bereiken. Maar wat als je nu een afbeelding wilt gebruiken, en bij een hover een andere afbeelding wilt tonen? In deze tutorial legt Bob de webbouwer je uit hoe je dat voor elkaar kunt krijgen, met alleen de afbeeldingen en een beetje css…
Het effect wat we willen bereiken is de volgende afbeelding. Als je met de muis over de afbeelding van Bob gaat wordt er een andere afbeelding getoond waarbij het lijkt alsof Bob op staat.
De eerste stap : 2 afbeeldingen
Om te beginnen heb je de twee afbeeldingen nodig die je voor dit effect wilt gebruiken. In mijn geval zijn dat de volgende 2 afbeeldingen:
We noemen deze afbeeldingen Bob1.png en Bob2.png. De afbeeldingen dienen dezelfde breedte en hoogte te hebben (in dit geval heeft de eerste afbeelding dus wat meer witruimte bovenaan om daarvoor te zorgen).
De tweede stap: Voeg beide afbeeldingen samen tot 1 afbeelding
Zet de afbeeldingen (Bob1.png en Bob2.png) boven elkaar. Zorg daarbij dat de bovenste afbeelding strak tegen de bovenkant aan is gepositioneerd en de onderste afbeelding strak tegen de onderzijde. Ook is het belangrijk dat de twee afbeeldingen verticaal hetzelfde gepositioneerd zijn, dus perfect onder elkaar staan.
De hoeveelheid ruimte tussen de twee afbeeldingen is niet van belang.
De afbeelding die normaal zichtbaar is zet je onderaan de samengevoegde afbeelding en de afbeelding die zichtbaar wordt bij een hover zet je bovenaan de samengevoegde afbeelding.
De derde stap: maak een class aan in de stylesheet
De derde stap is het aanmaken van een nieuwe class in de stylesheet. Deze class heeft in onderstaand voorbeeld de naam “naam-van-je-class”. Je hebt de volgende CSS code nodig:
.naam-van-je-class {
display: block;
width: 175px;
height: 175px;
background: url(‘www.jouwwebsite.nl/url-naar-bobsamen.png’) bottom;
text-indent: -99999px;
}
.naam-van-je-class:hover {
background-position: 0 0;
}
Je stelt de zojuist gemaakte afbeelding (Bobsamen.png) dus in als achtergrond voor deze class. De width moet gelijk zijn aan de breedte van de samengevoegde afbeelding (bobsamen.png dus), maar de height moet gelijk zijn aan de hoogte van één van de twee afbeeldingen (Bob1.png of Bob2.png, welke van de twee maakt niet uit want als het goed is hebben ze dezelfde afmetingen).
In dit voorbeeld is de height van Bobsamen.png 353px, maar ik moet de height van 1 afbeelding hebben, die van Bob1.png dus. Bob1.png heeft in dit geval een height van 175px, dus dat is de height die je hier instelt.
De laatste stap : maak een link met de class die je net hebt aangemaakt
De laatste stap is heel eenvoudig: je maakt een hyperlink en geeft deze de class die je net hebt aangemaakt.
Het leuke van deze methode is dat je in de HTML code geen afbeelding gebruikt (die is namelijk ingesteld als achtergrond in de CSS), maar een normale hyperlink. Dat is een stuk beter voor je SEO. Bovendien kun je als linktekst ook neerzetten wat je wilt (dus wat keywords erin kan helemaal geen kwaad ;-)) want die tekst ziet de gebruiker toch niet (daar zorgt de CSS code “text-indent: -99999px;” voor).
Je kunt deze methode overigens ook op een div toepassen, dus <div class=”naam-van-je-class”> in plaats van <a class=”naam-van-je-class”>.
Bronvermelding: dit artikel is gebaseerd op kyleschaeffer.com/development/pure-css-image-hover/