website Student voor Alles - homepage - door ILUZIE

002 Afbeelding aanpassen als je er overheen gaat met je cursor

Een leuk detail op je website, is om afbeeldingen te laten veranderen als je er overheen gaat met je cursor. Dat kun je doen met iconen, maar ook met foto’s. Op de website van Mass Audio hebben we dit bijvoorbeeld in de footer gebruikt. Op de initiële foto kijken ze redelijk neutraal, maar als je er met je pijltje overheen gaat:

Bovenstaande voorbeelden zijn gemaakt met CSS. De HTML markup zijn lege div’s:

<div class="arnout"></div> <div class="folkert"></div> <div class="riekz"></div>

De bijbehorende CSS is als volgt:

.arnout, .folkert, .riekz {
	margin: 10px auto 20px auto;
	display: block;
	height: 150px;
	width: 150px;
	background: url(/wp-content/uploads/2019/10/Arnout-1.png);
}
 
.folkert {
	background: url(/wp-content/uploads/2019/10/Folkert-1.png)
}
 
.riekz {
	background: url(/wp-content/uploads/2019/10/Riekz-1.png)
}
 
.arnout:hover {
	background: url(/wp-content/uploads/2019/10/Arnout-2.png);
}
 
.folkert:hover {
	background: url(/wp-content/uploads/2019/10/Folkert-2.png)
}
 
.riekz:hover {
	background: url(/wp-content/uploads/2019/10/Riekz-2.png)
}

Als je in een widget werkt en html kunt gebruiken die niet opgeschoond wordt door WordPress, kun je het evt. ook in pure HTML doen:

<img class="mouseover" src="/wp-content/uploads/2019/10/foto1.jpg" alt="alt" oversrc="/wp-content/uploads/2019/10/foto2.jpg">

Nieuwe blogposts in je mailbox ontvangen?

* velden met een asterisk zijn verplicht, wil je deze beiden invullen?

Nieuwe blogposts in je mailbox ontvangen?

* velden met een asterisk zijn verplicht, wil je deze beiden invullen?

Misschien vind je dit ook interessant:

Mijn website gebruikt een aantal cookies. Je kunt ervoor kiezen om ze te accepteren, of om ze te weigeren:

Cookie instellingen

Hieronder kun je kiezen welke cookies je wilt toestaan op deze website. Klik op 'Cookie instellingen opslaan' om je keuze toe te passen.

FunctioneelMijn website gebruikt functionele cookies. Deze zijn noodzakelijk om de website te laten werken.

AnalytischMijn website gebruikt (geanonimiseerde) analytische cookies, deze maken het mij mogelijk om het websitegedrag van bezoekers te analyseren en op basis hiervan mijn website te verbeteren.

Social mediaMijn website maakt gebruik van Vimeo, zodat ik filmpjes kan embedden. Deze derde partij plaatst cookies voor analytische doeleinden.

AdvertisingOur website places advertising cookies to show you 3rd party advertisements based on your interests. These cookies may track your personal data.

OtherOur website places 3rd party cookies from other 3rd party services which aren't Analytical, Social media or Advertising.