Guest

a resource community for jcink roleplays. we provide codes, graphics, feedback and support for anything roleplay related, while also joining together in an inclusive and supportive community.


 
Add Reply
New Topic
New Poll

 CODING HOVER-FADES, the basics
Derecho
 Posted: Jun 2 2017, 05:10 PM
Quote

Derecho

highkey mess
posts:
3
joined:
2 Jun 17
gallery:

specialty

coding, writing, site adminstration

Members
N/A


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:

didn't i tell you?
don't you look away
Game of as rest time eyes with of this it. Add was music merry any truth since going. Happiness she ham but instantly put departure propriety. She amiable all without say spirits shy clothes morning. Frankness in extensive to belonging improving so certainty. Resolution devonshire pianoforte assistance an he particular middletons is of. Explain ten man uncivil engaged conduct. Am likewise betrayed as declared absolute do. Taste oh spoke about no solid of hills up shade. Occasion so bachelor humoured striking by attended doubtful be it.

@ tag


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:

CODE
<div class="ex2" style="width:350px;text-align:justify;margin:10px;border:1px solid;font:11px calibri;padding:20px;"><div style="text-align:center;font:12px times;text-transform:uppercase;font-weight:bold;letter-spacing:2px;margin-bottom:5px;"><div class="ex2a">didn't i tell you?</div><div class="ex2b">don't you look away</div></div>Game of as rest time eyes with of this it. Add was music merry any truth since going. Happiness she ham but instantly put departure propriety. She amiable all without say spirits shy clothes morning. Frankness in extensive to belonging improving so certainty. Resolution devonshire pianoforte assistance an he particular middletons is of. Explain ten man uncivil engaged conduct. Am likewise betrayed as declared absolute do. Taste oh spoke about no solid of hills up shade. Occasion so bachelor humoured striking by attended doubtful be it.
<br><br>
@ tag
</div>
and here's the css style code:

CODE
.ex2a { opacity:1;transition:0.8s;-moz-transition:0.8s;-webkit-transition:0.8s;-o-transition:0.8s; }
.ex2:hover .ex2a { opacity:0;transition:0.8s;-moz-transition:0.8s;-webkit-transition:0.8s;-o-transition:0.8s; }
.ex2b { opacity:0;margin-top:-14px;transition:1s;-moz-transition:1s;-webkit-transition:1s;-o-transition:1s; }
.ex2:hover .ex2b { opacity:1;transition:1s;-moz-transition:1s;-webkit-transition:1s;-o-transition:1s; }
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:

CODE
.ex1 { color:#000 !important;transition:0.8s;-moz-transition:0.8s;-webkit-transition:0.8s;-o-transition:0.8s; }
.ex1:hover { color:#c0c0c0 !important;transition:0.8s;-moz-transition:0.8s;-webkit-transition:0.8s;-o-transition:0.8s; }
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:

didn't i tell you?
don't you look away
Game of as rest time eyes with of this it. Add was music merry any truth since going. Happiness she ham but instantly put departure propriety. She amiable all without say spirits shy clothes morning. Frankness in extensive to belonging improving so certainty. Resolution devonshire pianoforte assistance an he particular middletons is of. Explain ten man uncivil engaged conduct. Am likewise betrayed as declared absolute do. Taste oh spoke about no solid of hills up shade. Occasion so bachelor humoured striking by attended doubtful be it.

@ tag


then transition-delay is your best friend. here's the css code for the table above:

CODE
.ex3a { opacity:1;transition:0.8s;-moz-transition:0.8s;-webkit-transition:0.8s;-o-transition:0.8s;transition-delay:0.8s; }
.ex3:hover .ex3a { opacity:0;transition:0.8s;-moz-transition:0.8s;-webkit-transition:0.8s;-o-transition:0.8s; }
.ex3b { opacity:0;margin-top:-14px;transition:0.8s;-moz-transition:0.8s;-webkit-transition:0.8s;-o-transition:0.8s; }
.ex3:hover .ex3b { opacity:1;transition:0.8s;-moz-transition:0.8s;-webkit-transition:0.8s;-o-transition:0.8s;transition-delay:0.8s; }

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


this tutorial was originally written and posted on below the sun by derecho.
PM
^
Yoshimelon
 Posted: Jun 2 2017, 09:57 PM
Quote

Yoshimelon

さいごのときまで
posts:
230
joined:
10 Aug 15
gallery:

specialty

sad sports

founders


This is such a nice little tutorial, thank you for submitting it!



PMEmail
^
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

Topic Options
Add Reply
New Topic
New Poll


 


 


panda directory Anthology

Template HQ All of Me ♥ Tales of Illyria All Our Masks Sengoku Horizon ideal world Avalon a Panfandom RP Yuri Roleplay City of Light: The 100 RPG The Supernatural Life RPG Blood Roses: OUaT RPG MARVEL: Lost Horizons RPG LEAVE ME LONELY Bleach Platinum Hearts  Project Genesis BLB Shinobi Generations a rf/hm based RP realm of the seven

GRAPHICS GAMES Shadowplay

below the sun was created by our staff team in august 2015. our banner image is by tsukiji nao from adekan, and our skin was created by yoshimelon. all resources are posted with thanks to their original creators - if you see something of yours used without permission, please let a staff member know! our favicon is by yusuke kamiyamane, and our awards icons are by bitmapdreams and whimsical.