Uxie
ଘ(੭ˊ꒳ˋ)੭* ੈ‧₊❀˖°
[div class=container]
so first off – classes
to put it very simply, they're kinda like
neater divs, in a sense. imagine if u were studying for an exam in history or something and it was always the same topic but u make a single note each year,, that's kinda like having individual divs
with classes you can sorta reference them each time. it maybe makes it easier on the eyes???? im probably not explaining this right at all but i dont actually know shit abt coding i just google "function css" everytime so yea
thats a good backup if you dont get how a function works cause most of bbcode+ are css/html/javascript things im p sure
but yeah so anyways CLASSEs. while they make coding a lot easier to look at, they also allow u to add in functionalities like scripts n hovers (!!!) big wowie. scripts are a whole other story but like, hoenstly once u get the hang of it it gets way easier from there,,, honestly im still like ????? abt so many functions but yes. eventually u will become a god with enough time n practice
so to start it off, you're gonna want to make a class for ur img. it'll basc look like any image div but you can line break within the class so instead of:
[div=height:50px;width:50px;background:url('https://data.whicdn.com/images/289553123/large.jpg');margin:auto;background-size:100%;][/div]
you have:
[class=img]
height:150px;
width:150px;
background:url('https://data.whicdn.com/images/289553123/large.jpg');
margin:auto;
background-size:100%;
position:relative;
[/class]
to have ur class appear in the actual code itself, you reference it with [div class=nameofclass][/div] btw you can name ur class like almost anything as long as there r no spaces i think??? iirc underscores work too but
so referencing it,
[div class=img][/div]
it's basc the same thing as if you wrote out the whole div. (: useful if you're going to be using the same code multiple times. so that's a simple class summary ig
btw to keep things neat, i'd recommend keeping all your classes below your actual code itself where you're referencing everything, within either a tag which removes all line breaks and thus removes extra white space, or a [div=display:none][/div] which basc hides it. both work, lyro recommended the nobr one but its up to u (:
--tutorial starts here
so we have our cool image from earlier here
[div class=img][/div]
now to make a hover class!
basc you make a different class to with the components that you want to show when you hover over the image
you can put nearly anything in, change an image or have a colour or text show up, whatever yknow. go crazy
going simple n for aster's sake bc this what they asked for
the example hover i'll have is one a change in image.
so my class is gonna look like this:
[class=imghover]
height:150px;
width:150px;
background:url('https://pm1.narvii.com/6535/042b2eb6487417c009fa1a46dddd164570dbbb80_hq.jpg');
background-size:100%;
position:relative;
[/class]
and here it is below our original kermit. we'll call this one kermit 2 and the other one kermit 1.
[div class=img][/div]
[div class=imghover][/div]
note you can use position:absolute; instead, im just using position:relative; here bc im too lazy to make an extra container just for these imgs. when a div has position:absolute; added to it, it kinda ignores all other divs and goes where it pleases. having position:relative; also works as well, but i prefer position:absolute; just bc it makes life easier bc i dont have to add top: or left: values as much lol.
take note that position:absolute; on its own may fuck up a lot bc it rlly does go as it pleases and it'll be kinda sitting on the page regardless of what u tell it
to control this, what i usually do anyways to work w dimensions is to have a container box with position:relative; people usually call this the parent div
so bc the parent div has position:relative; the child div kinda takes it on and will only have position:absolute; within the position:relative; div. is this confusing? if it is just use position:relative; LOL
so anyways, now we gotta shift imghover onto img. w position:relative; values. using negative values in left: or top: makes it go in the opposite direction, aka upwards, which is what we want now. now we see kermit 2 slowly eat up kermit 1.
for this one i had to move it up 150px, which makes sense bc thats how big the photos are. so now that kermit 2 has taken over kermit 1, we need to actlly make him hover. so to do that, we reduce his opacity to 0 by adding opacity:0; to his class (imghover). bye kermit 2. hello kermit 1.
[div class=img][/div]
now how do we get kermit 2 to show up when we hover over kermit 1?
since kermit 2 is still where kermit 1 is, just that we cant see him, we just have to add a hover state to his class, like this:
[class name=imghover state=hover]
just dump that right below ur imghover div
and within that, we're gonna put in what we want to change about kermit 2 when we hover over. we want kermit 2 to appear, so we add in opacity:1; , like so:
[class name=imghover state=hover]
opacity:1;
[/class]
if you want kermit 2 to appear very suddenly as a surprise, you can leave it as it is, but most of the time we want a smoother transition. just for this one, we're gonna specify a transition timing with transition: (duration);
so let's have kermit 2 appear gradually after half a second. we add that in.
[class name=imghover state=hover]
opacity:1;
transition:1s;
[/class]
to allow kermit 2 to have as smooth a departure as his arrival, we're gonna pop that same transition:1s; into his class div as well, so he leaves in style as well. so right now, your classes should look like this.
[class=img]
height:150px;
width:150px;
background:url('https://data.whicdn.com/images/289553123/large.jpg');
background-size:100%;
[/class]
[class=imghover]
height:150px;
width:150px;
background:url('https://pm1.narvii.com/6535/042b2eb6487417c009fa1a46dddd164570dbbb80_hq.jpg');
background-size:120%;
position:relative;
top:-150px;
opacity:0;
transition:1s;
[/class]
[class name=imghover state=hover]
opacity:1;
transition:0.5s;
[/class]
pretty fine and dandy. all that should look like this when you plug it in:
[div class=img][/div][div class=imghover2][/div] remember to make use of the preview button when you're changing this to fit whatever youre making to make sure everything's good. preview button is every bbcoder's best friend (:
there r a lot of different divs u can do, ones that kinda zero into ur picture, or hover in as a colour or make some cool text appear, but this is the very basic. figuring out the others shouldn't be too hard from here on out
hope this helped and im sorry i type sO DAMN MUCH LMAO. i hope it was at least entertaining. that's all from kermits 1 and 2 thank u and goodbye hope u learnt something from this long ass read xx
Aster
here u go this is for u
[/div]
[class=container] overflow-y:scroll; height:500px; position:relative; margin:auto; width:60%; padding:10px; [/class] [class=img] height:150px; width:150px; background:url('https://data.whicdn.com/images/289553123/large.jpg'); background-size:100%; [/class] [class=imghover] height:150px; width:150px; background:url('https://pm1.narvii.com/6535/042b2eb6487417c009fa1a46dddd164570dbbb80_hq.jpg'); background-size:120%; position:relative; [/class] [class=imghover2] height:150px; width:150px; background:url('https://pm1.narvii.com/6535/042b2eb6487417c009fa1a46dddd164570dbbb80_hq.jpg'); background-size:120%; position:relative; top:-150px; opacity:0; transition:1s; [/class] [class name=imghover2 state=hover] opacity:1; transition:1s; [/class]
aster asked me for a tutorial on how to do hovers so i thought i'd put it here too
im not very good at explaining but yes i hope u get the general idea
feel free to skip down to "tutorial starts here" if u already know how classes work
im not very good at explaining but yes i hope u get the general idea
feel free to skip down to "tutorial starts here" if u already know how classes work
so first off – classes
to put it very simply, they're kinda like
neater divs, in a sense. imagine if u were studying for an exam in history or something and it was always the same topic but u make a single note each year,, that's kinda like having individual divs
with classes you can sorta reference them each time. it maybe makes it easier on the eyes???? im probably not explaining this right at all but i dont actually know shit abt coding i just google "function css" everytime so yea
thats a good backup if you dont get how a function works cause most of bbcode+ are css/html/javascript things im p sure
but yeah so anyways CLASSEs. while they make coding a lot easier to look at, they also allow u to add in functionalities like scripts n hovers (!!!) big wowie. scripts are a whole other story but like, hoenstly once u get the hang of it it gets way easier from there,,, honestly im still like ????? abt so many functions but yes. eventually u will become a god with enough time n practice
so to start it off, you're gonna want to make a class for ur img. it'll basc look like any image div but you can line break within the class so instead of:
[div=height:50px;width:50px;background:url('https://data.whicdn.com/images/289553123/large.jpg');margin:auto;background-size:100%;][/div]
you have:
[class=img]
height:150px;
width:150px;
background:url('https://data.whicdn.com/images/289553123/large.jpg');
margin:auto;
background-size:100%;
position:relative;
[/class]
to have ur class appear in the actual code itself, you reference it with [div class=nameofclass][/div] btw you can name ur class like almost anything as long as there r no spaces i think??? iirc underscores work too but
so referencing it,
[div class=img][/div]
it's basc the same thing as if you wrote out the whole div. (: useful if you're going to be using the same code multiple times. so that's a simple class summary ig
btw to keep things neat, i'd recommend keeping all your classes below your actual code itself where you're referencing everything, within either a tag which removes all line breaks and thus removes extra white space, or a [div=display:none][/div] which basc hides it. both work, lyro recommended the nobr one but its up to u (:
--tutorial starts here
so we have our cool image from earlier here
[div class=img][/div]
now to make a hover class!
basc you make a different class to with the components that you want to show when you hover over the image
you can put nearly anything in, change an image or have a colour or text show up, whatever yknow. go crazy
going simple n for aster's sake bc this what they asked for
the example hover i'll have is one a change in image.
so my class is gonna look like this:
[class=imghover]
height:150px;
width:150px;
background:url('https://pm1.narvii.com/6535/042b2eb6487417c009fa1a46dddd164570dbbb80_hq.jpg');
background-size:100%;
position:relative;
[/class]
and here it is below our original kermit. we'll call this one kermit 2 and the other one kermit 1.
[div class=img][/div]
[div class=imghover][/div]
note you can use position:absolute; instead, im just using position:relative; here bc im too lazy to make an extra container just for these imgs. when a div has position:absolute; added to it, it kinda ignores all other divs and goes where it pleases. having position:relative; also works as well, but i prefer position:absolute; just bc it makes life easier bc i dont have to add top: or left: values as much lol.
take note that position:absolute; on its own may fuck up a lot bc it rlly does go as it pleases and it'll be kinda sitting on the page regardless of what u tell it
to control this, what i usually do anyways to work w dimensions is to have a container box with position:relative; people usually call this the parent div
so bc the parent div has position:relative; the child div kinda takes it on and will only have position:absolute; within the position:relative; div. is this confusing? if it is just use position:relative; LOL
so anyways, now we gotta shift imghover onto img. w position:relative; values. using negative values in left: or top: makes it go in the opposite direction, aka upwards, which is what we want now. now we see kermit 2 slowly eat up kermit 1.
[div class=img]
[div class=imghover]
[/div][/div]
[div class=img]
[div class=imghover]
[/div][/div]
[div class=img]
[div class=imghover]
[/div][/div]for this one i had to move it up 150px, which makes sense bc thats how big the photos are. so now that kermit 2 has taken over kermit 1, we need to actlly make him hover. so to do that, we reduce his opacity to 0 by adding opacity:0; to his class (imghover). bye kermit 2. hello kermit 1.
[div class=img][/div]
[div class=imghover]
[/div]now how do we get kermit 2 to show up when we hover over kermit 1?
since kermit 2 is still where kermit 1 is, just that we cant see him, we just have to add a hover state to his class, like this:
[class name=imghover state=hover]
just dump that right below ur imghover div
and within that, we're gonna put in what we want to change about kermit 2 when we hover over. we want kermit 2 to appear, so we add in opacity:1; , like so:
[class name=imghover state=hover]
opacity:1;
[/class]
if you want kermit 2 to appear very suddenly as a surprise, you can leave it as it is, but most of the time we want a smoother transition. just for this one, we're gonna specify a transition timing with transition: (duration);
so let's have kermit 2 appear gradually after half a second. we add that in.
[class name=imghover state=hover]
opacity:1;
transition:1s;
[/class]
to allow kermit 2 to have as smooth a departure as his arrival, we're gonna pop that same transition:1s; into his class div as well, so he leaves in style as well. so right now, your classes should look like this.
[class=img]
height:150px;
width:150px;
background:url('https://data.whicdn.com/images/289553123/large.jpg');
background-size:100%;
[/class]
[class=imghover]
height:150px;
width:150px;
background:url('https://pm1.narvii.com/6535/042b2eb6487417c009fa1a46dddd164570dbbb80_hq.jpg');
background-size:120%;
position:relative;
top:-150px;
opacity:0;
transition:1s;
[/class]
[class name=imghover state=hover]
opacity:1;
transition:0.5s;
[/class]
pretty fine and dandy. all that should look like this when you plug it in:
[div class=img][/div][div class=imghover2][/div] remember to make use of the preview button when you're changing this to fit whatever youre making to make sure everything's good. preview button is every bbcoder's best friend (:
there r a lot of different divs u can do, ones that kinda zero into ur picture, or hover in as a colour or make some cool text appear, but this is the very basic. figuring out the others shouldn't be too hard from here on out
hope this helped and im sorry i type sO DAMN MUCH LMAO. i hope it was at least entertaining. that's all from kermits 1 and 2 thank u and goodbye hope u learnt something from this long ass read xx
Aster
here u go this is for u[/div]
[class=container] overflow-y:scroll; height:500px; position:relative; margin:auto; width:60%; padding:10px; [/class] [class=img] height:150px; width:150px; background:url('https://data.whicdn.com/images/289553123/large.jpg'); background-size:100%; [/class] [class=imghover] height:150px; width:150px; background:url('https://pm1.narvii.com/6535/042b2eb6487417c009fa1a46dddd164570dbbb80_hq.jpg'); background-size:120%; position:relative; [/class] [class=imghover2] height:150px; width:150px; background:url('https://pm1.narvii.com/6535/042b2eb6487417c009fa1a46dddd164570dbbb80_hq.jpg'); background-size:120%; position:relative; top:-150px; opacity:0; transition:1s; [/class] [class name=imghover2 state=hover] opacity:1; transition:1s; [/class]
Last edited:
blique;
line-height:90%;
[/class]
[class=codeinfolink]
float:left;
font-size:11px;
font-style:normal;
font-weight:normal;
margin-left: 2%;
text-shadow:none;
margin-top:1%;
letter-spacing:normal;
background-color: var(--color-3);
padding-right:4px;
padding-left:4px;
border-radius:1px;
[/class]
[class name=codeinfolink maxWidth="539px"]
font-size:10px;
[/class]
[div class=codeinfocontainer][div class=codeinfoleftside]
[div class=codeinfotrademark]
