Post by Aiko on Jun 22, 2016 4:45:14 GMT
Hello guys, and welcome to Aiko's styling guide! I had some troubles figuring out hovers on Proboards myself, so why not share my new knowledge?
Hover Tutorial #1
The first step is to find the image you will be using. I will be using an image located at placehold.it/350x150 . Once you have your image, open and close a div tag like this:
Nothing shows up, right? Now you need to set the width and height to the same dimensions as your image, in pixels. Like this:
Okay now we have our image.
Now we need to actually make the hover class. Set this at the bottom of your code, which will create the class t1. (Note I may have to change this in each step)
Okay so now we have made the classes. The first class will have the opacity set to 0, so you may not see the text. On hovering, the second class, will be set to .9 opacity.
Okay now we have the new classes set up.
Now to apply the class to the code. We will be using the attr tag, (attribute) inside the opening and closing div tag for the text. Just try to follow along here as best you can, I will try to answer any questions you have.
NOTE: The preview tab will not work on this, and will look distorted.
Replace the t1 in the attribute tag with your class name, and you've done it!
Test it below:
[newclass=.t1]transition:1s;transition-delay:.1s;opacity:0;font-color:red;width:350px;height:150px;[/newclass][newclass=.t1:hover]transition:1s;transition-delay:.1s;opacity:0.9;background-color:#f57570;width:350px;height:150px;[/newclass]
Feel free to use this for whatever purpose you deem it worthy of. Thanks for reading!
STEP 1
The first step is to find the image you will be using. I will be using an image located at placehold.it/350x150 . Once you have your image, open and close a div tag like this:
[div style="background-image:url('http://placehold.it/350x150');"][/div]Nothing shows up, right? Now you need to set the width and height to the same dimensions as your image, in pixels. Like this:
[div style="background-image:url('http://placehold.it/350x150');width:350px;height:150px;"][/div]Okay now we have our image.
STEP 2
Now we need to actually make the hover class. Set this at the bottom of your code, which will create the class t1. (Note I may have to change this in each step)
[newclass=.t1][/newclass][newclass=.t1:hover][/newclass]Okay so now we have made the classes. The first class will have the opacity set to 0, so you may not see the text. On hovering, the second class, will be set to .9 opacity.
[newclass=.t1]transition:1s;transition-delay:.1s;opacity:0;font-color:red;width:350px;height:150px;[/newclass][newclass=.t1:hover]transition:1s;transition-delay:.1s;opacity:0.9;background-color:#f57570;width:350px;height:150px;[/newclass]Okay now we have the new classes set up.
STEP 3
Now to apply the class to the code. We will be using the attr tag, (attribute) inside the opening and closing div tag for the text. Just try to follow along here as best you can, I will try to answer any questions you have.
[div style="background-image:url('http://placehold.it/350x150');width:350px;height:150px;"][div][attr="class","t1"]TEXT GOES HERE[/div][/div]
[/div]
[newclass=.t1]transition:1s;transition-delay:.1s;opacity:0;font-color:red;width:350px;height:150px;[/newclass][newclass=.t1:hover]transition:1s;transition-delay:.1s;opacity:0.9;background-color:#f57570;width:350px;height:150px;[/newclass]NOTE: The preview tab will not work on this, and will look distorted.
Replace the t1 in the attribute tag with your class name, and you've done it!
Test it below:
[attr="class","t1"]TEXT GOES HERE
[newclass=.t1]transition:1s;transition-delay:.1s;opacity:0;font-color:red;width:350px;height:150px;[/newclass][newclass=.t1:hover]transition:1s;transition-delay:.1s;opacity:0.9;background-color:#f57570;width:350px;height:150px;[/newclass]
Feel free to use this for whatever purpose you deem it worthy of. Thanks for reading!
