HTML en CSS #9 Hover effect

25 augustus 2016


Hi iedereen!
Ik ben echt mega enthousiast want ik heb een super leuk trucje ontdekt (credits naar Annesolvieg.nl) en wil die graag met jullie delen! Ik heb namelijk het hover effect toegevoegd aan mijn social media icons (ga maar eens met de muis erover heen! Je ziet het overigens alleen op de computer) en ik vind het zo mooi en echt iets toevoegen aan mijn blog, daarom wilde ik het ook graag delen :)

2 Plaatjes
Ten eerste heb je twee plaatjes nodig. Het plaatje wat je ziet (Plaatje A) en het plaatje dat je ziet als je met de muis over de foto heengaat (Plaatje B) hieronder een voorbeeld. Boven zie je mijn B plaatje.
Ik heb ze zelf gemaakt met Picmonkey, dus hadden ze nog een URL nodig. Dit heb ik gedaan via Tinypic.com. Als je je afbeelding hebt geüpload dan kopieer je de onderste code, dus die voor lay-outs, deze heb je zo meteen nodig voor het invullen van de code. 

De code

<a title="Follow on Instagram" href="https://SOCIAL MEDIA.com/GEBRUIKERSNAAM" target="blank">
<img onmouseout="this.src='LINK INSTAGRAM-A'" onmouseover="this.src='LINK INSTAGRAM-B'" 
src="LINK INSTAGRAM A" alt="Follow on Instagram" /></a>


Als je in blogger werkt dan ga je naar Indeling--> toevoegen--> java script/HTML--> je plakt de code en vult hem verder in. (De grijze tekst verwijder je en daar vul je jouw gegevens in, oftewel je social media, de link van je plaatje A en B (die heb je nu doordat je je afbeelding hebt geüpload in Tinypic. Dit kan je natuurlijk ook voor alle andere social media kanalen doen, en als je wilt kan je dit zelfs toepassen voor je header of andere plaatjes op je blog, oftewel, je kan er heel veel kanten mee op!

Wat vindt jij van dit trucje?

1 opmerking

  1. Super nice ik ga binnenkort ene nieuwe lay-out gebruiken misschien dat ik hier wel wat mee kan!

    BeantwoordenVerwijderen

Latest Instagrams

© Inspiregirll. Design by Fearne.