Help hover code confusion ):

[summerwine]

How would one code a hover over this current code? I'm super duper confused.

Spoiler: code

[nobr]
[div=background:url('https://66.media.tumblr.com/67be8e06d40c5b3e637b540c6efbed05/tumblr_okbew8zrNI1qbg3s6o4_400.png'); background-size:auto; border-style:transparent; border-radius:30px; width:360px; height:590px;]
[br][/br]
[br][/br]
[div=background:url('https://66.media.tumblr.com/1ee06348aea503ed06a18a268691f9f4/tumblr_ov5sajJMe71w0qr1bo8_250.jpg'); background-size:cover; border-style:transparent; border-radius:100px; width:200px; height:200px; margin:auto;] [/div]
[br][/br]
[center][size=40px][color=black][font=Dancing Script]Natalia Dyer[/font][/color][/size][/center][/div][/nobr]

Natalia Dyer​

 

[deer]

hi hi !
in terms of hovering over this code, are you hovering the entire code or just a certain part? what would you like to happen when you hover over it?

there's a bbcode+ tutorial in regards to hovering if you'd like a link?
there's the RPNation guide and I believe there's another around here that I can find / send to you depending on what you'd like to do?

 

[summerwine]

hi hi!

I'm hovering the entire code. When you'd hover over it the code would have more writing, pictures and a different background. Links would be super helpful. (:

 

[deer]

from my understanding. . . this code as an example, i believe of how to do it:
you'll have to use a lot of classes for specific sections of the cs which could look something like this:

Spoiler: boop

[nobr][class=hi]
entire code information including width, height, bg
[/class]

[class=trans]
transition: 1s;
position: relative;
transition information including width, height, bg
[/class]

[class name=trans state=hover]
margin-left: information
[/class]

[class=meow]
first background code
[/class]

[class=meowmeow]
second background code
[/class]

[div class=hi][div class=trans]
[div class=meow] text information for your first background
[/div]

[div class=meow]text information for your second background[/div][/div][/div][/nobr]

and then if you just want to hover over a picture, it'll look something like this:

Spoiler: ahhh

[center][nobr]
[class=picture]
position: relative;
display: inline-block;
[/class]

[class=text]
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
background-color: rgba(0,0,0,0.1);
color: white;
z-index: 2;
[/class]

[class name=text state=hover]
opacity: 1;
[/class]

[div class=picture]
[div class=text]
[div=margin-top: 160px; text-shadow: 2px 2px 4px black; padding: 5px;][font=Playball][size=5]"hello there! quote here"[/size][/font][/div]
[/div]
[div=background: url('imagehere'); border: solid 5px #EFEFEF; width: 500px; height: 213px; margin: auto;][/div][/div][/nobr][/center]

the classes section could help you with the hovering:

Tutorial - RpNation - BBCode+ Guide

background-color: white; color: black; padding: 10px; border-bottom: double 5px rgb(48, 97, 146); box-sizing: border-box; color: rgb(48, 97, 146); font-size: 270%; font-weight: bold; line-height: 1; margin-bottom: 5px; padding: 5px 0px 7px...

www.rpnation.com

i know this isn't hovering, but they also made a good tutorial for tabs and all:

Tutorial - ☂ snippets

font callddd [class name=aspectratio] display: block; position: relative; overflow: hidden; width: 100%; height: 0px; padding-top: 55%; background: #f8f8f8 url('https://i.imgur.com/xWTvlpL.jpg'); [/class] [class name=aspectratio maxWidth=799px] padding-top: 0px; height...

www.rpnation.com

 

[Fable]

summerwine So something like this

Resource - Fyurious Codes 2.0

[div class=fyuriparent][div class=mainimg][/div][/div][div class=txtreal][div class=behindtxt][div class=text][div class=header]fal fa-gem Introduction[/div] Welcome to my pathetic BBCode thread. Most of the codes you'll find in here are fairly minimalistic in style. This is for a variety of...

www.rpnation.com

or this?

Resource - Fyurious Codes 2.0

[div class=fyuriparent][div class=mainimg][/div][/div][div class=txtreal][div class=behindtxt][div class=text][div class=header]fal fa-gem Introduction[/div] Welcome to my pathetic BBCode thread. Most of the codes you'll find in here are fairly minimalistic in style. This is for a variety of...

www.rpnation.com

You can use those as a ref to see how I did the hovers. There are a few ways you can do this, but it really all depends on how you want the hover to work overall. It is covering the entire part you've currently created? Just a section?

 

[summerwine]

Fable deer - Thank you both so much! I think I was able to successfully do what I wanted.

Spoiler: the updated code

[nobr]

[class=wrapper]
max-width:400px;
margin:auto;
[/class]

[class=imagebox]
width:90%;
height:590px;
background:url('https://66.media.tumblr.com/67be8e06d40c5b3e637b540c6efbed05/tumblr_okbew8zrNI1qbg3s6o4_400.png');
border-radius: 20px;
[/class]

[class=overlayparent]
display: flex;
align-items: center;
justify-content: center;
max-width:400px;
height:500px;
[/class]

[class=overlay]
display: flex;
width:200px;
height:200px;
margin:auto;
background:url('https://66.media.tumblr.com/1ee06348aea503ed06a18a268691f9f4/tumblr_ov5sajJMe71w0qr1bo8_250.jpg');
border-radius: 100px;
background-size: cover;
[/class]

[class=header]
display: flex;
align-items: center;
justify-content: center;
flex-flow: column nowrap;
text-align:center;
width:100%;
font-family: 'Dancing Script', Impact;
font-size:30px;
color:#fff;
font-size: 40px;
[/class]

[class=parent]
opacity:0.0;
position:relative;
margin:-600px 10px 100px 500px;
width:28%;
height:570px;
transition:  2.3s;
border-radius: 17px;
[/class]

[class name=parent state=hover]
opacity:1.0;
width:1100px;
height:590px;
border-radius: 30px;
padding:10px;
[/class]

[class=content]
width:33%;
height:585px;
background-color:#fff;
overflow: hidden;
padding:2px;
color:#313131;
border-radius: 17px;
text-align: left;
[/class]

[class=textbox]
height: 585px;
width: 100%;
overflow-y: scroll;
padding-right: 45px;
[/class]

[div class=wrapper][div class=imagebox][div class=overlayparent][div class=overlay][div class=header]
[br][/br]
[br][/br]
[br][/br]
[br][/br]
[br][/br]
Cindy Goode[/div][/div][/div][/div][/div]
[div class=parent][div class=content][div class=textbox]wow did i do it?
[/div][/div][/div]
[/nobr]

[class=wrapper] max-width:400px; margin:auto; [/class] [class=imagebox] width:90%; height:590px; background:url('https://66.media.tumblr.com/67be8e06d40c5b3e637b540c6efbed05/tumblr_okbew8zrNI1qbg3s6o4_400.png'); border-radius: 20px; [/class] [class=overlayparent] display: flex; align-items: center; justify-content: center; max-width:400px; height:500px; [/class] [class=overlay] display: flex; width:200px; height:200px; margin:auto; background:url('https://66.media.tumblr.com/1ee06348aea503ed06a18a268691f9f4/tumblr_ov5sajJMe71w0qr1bo8_250.jpg'); border-radius: 100px; background-size: cover; [/class] [class=header] display: flex; align-items: center; justify-content: center; flex-flow: column nowrap; text-align:center; width:100%; font-family: 'Dancing Script', Impact; font-size:30px; color:#fff; font-size: 40px; [/class] [class=parent] opacity:0.0; position:relative; margin:-600px 10px 100px 500px; width:28%; height:570px; transition: 2.3s; border-radius: 17px; [/class] [class name=parent state=hover] opacity:1.0; width:1100px; height:590px; border-radius: 30px; padding:10px; [/class] [class=content] width:33%; height:585px; background-color:#fff; overflow: hidden; padding:2px; color:#313131; border-radius: 17px; text-align: left; [/class] [class=textbox] height: 585px; width: 100%; overflow-y: scroll; padding-right: 45px; [/class] [div class=wrapper][div class=imagebox][div class=overlayparent][div class=overlay][div class=header]




Cindy Goode[/div][/div][/div][/div][/div] [div class=parent][div class=content][div class=textbox]wow did i do it? [/div][/div][/div]

 

[deer]

y a a s , get it get it !
congratulations !