HTML/CSS Tutorial || Hover & Scroll To Top

Door simpele HTML/CSS codes kun je je blog een stuk interessanter maken. Ook ik ben hier de laatste tijd steeds meer mee bezig. Omdat ik veel leuke en handige trucjes heb die je toe kan passen in je HTML/CSS leek het me erg leuk om er een soort herhalende tutorial van te maken. Natuurlijk doen meerdere bloggers dit, maar er kan altijd weer iets nieuws bij zitten! Ik wil de uitdaging aangaan en zo nu en dan een HTML/CSS Tutorial online zetten. Enjoy!

Je hebt verschillende manieren om het leuke hover effect op je foto's te krijgen. Als je met je muis over een foto gaat dan licht 'ie op. Ik heb dit effect altijd al erg gaaf gevonden, maar wist nooit zo goed hoe je het moest toepassen. Na wat research heb ik een erg makkelijke CSS code gevonden die ook nog eens goed werkt!

-------------------------------------------------------------------------------------------------------------------------------------------------------------

Een hover toevoegen aan je foto's

Ga naar Sjabloon > Aanpassen > Geavanceerd > CSS toevoegen

Voeg onderstaande code in het witte vak en pas eventueel de s' aan naar jouw smaak! De cijfers betekenen onder andere de snelheid waarin de hover zichtbaar wordt en de doorzichtigheid ervan.

.post-body img {
opacity:1.0;
-webkit-transition: all 0.1s;
-moz-transition: all 0.1s;
-ms-transition: all 0.1s;
-o-transition: all 0.1s;
transition: all 0.1s;
}

.post-body img:hover {
opacity:0.8;

-------------------------------------------------------------------------------------------------------------------------------------------------------------

Een scroll to the top button toevoegen

Ga naar Blogger > Sjabloon > HTML bewerken. Zoek deze lijn op (CTRL + F): 

</body>

Plak er één van de codes op deze site boven. De codes staan ernaast, dus het is een kwestie van zoeken en plakken! Ik heb hier ook mijn pijltje van die je rechts onder in ziet verschijnen als je naar beneden scrolt. Ik vind het een erg fijn systeem!

Wat vinden jullie van zo'n tutorial?