|Home||Help Search Members Calendar Shoutbox|
|Welcome Guest ( Log In | Register )||Resend Validation Email|
Posted: Jun 2 2017, 05:10 PM
so, there's a lot of templates out there. some are static, which means that moving the mouse around won't make anything happen. however, some have the hover function, which means that they do something like this:
hover over me!
in an actual posting template, it may look something more like this:
so what makes the hover-fade effect actually happen? the code and the code's prefixes actually happen to depend on the user's browser and what the rendering engine of the browser is. specifically, the following prefixes are for their respective browser(s):
-moz for firefox;
-webkit for chrome, safari, and opera;
-o for opera.
so how do you do this? here's the code for the "posting table" i've put above:
and here's the css style code:
so let's break it down.
first off is the class tag. of course .ex2a is a class name here, according to css rules. however, the text ".ex2:hover .ex2a" means something a little different. .ex2 describes the overall div container of the post template. thus, ".ex2:hover .ex2a" means "when someone is hovering over the div container identified as .ex2, then you should make these following changes to .ex2a."
however, if you want something within .ex2 itself to change - like the first example does in fading the black test to light gray and back - then you don't need the secondary tag. for example, here's the css code for the very first example:
so what causes the hover-fade effect? to be honest, you can copy and paste the transition codes for every single transition you want to make. however, it's important to keep in mind that a hover-fade only works one way unless you specify the hover to occur for both the regular class css code as well as the class:hover code.
for example, in the .ex1 code above if the transition codes were not present for .ex1:hover, then the transition would not take the same amount of time to occur. in the same vein, if the transition codes were not present for .ex2 under .ex2:hover, then the transition would occur immediately.
of course, if you'd like to make something like this happen, where the hover happens after a delay for a cleaner transition:
then transition-delay is your best friend. here's the css code for the table above:
for transition-delay, it's important to remember that the transition code is for when the div is being used. for example, the transition code under ".ex3:hover .ex3b" means that "transition should take 0.8 seconds when it is transitioning from a position where the user is not hovering over .ex3 to when they are."
of course, the converse applies. thus, the transition code under ".ex3" means that "transition should take 0.8 seconds when it is transitioning from a position where the user was hovering over .ex3 to a position where they are not."
these are just the basics of what you can do with hovers and transitions. hopefully it helped! <3
Posted: Jun 2 2017, 09:57 PM
This is such a nice little tutorial, thank you for submitting it!