HOVER CRAFTS, tutorial
POST CREATED Nov 24, 2014 4:36:48 GMT -8
redox-kun, SUCRÉ, and 27 more like this
Post by eden on Nov 24, 2014 4:36:48 GMT -8
hover crafts.
That being, crafting templates with hovers. I like to think I'm clever. Um, there are likely a lot of people more familiar with hovers than I am, but someone asked a while ago so I thought I'd make a tutorial on the basics of it. They're actually really simple once you understand how they work, but this tutorial needs you to have a bare minimum understanding of code, still. I hope this is helpful, and that I remain coherent throughout, haha. Let's begin!
First off, :hover is a CSS selector. It reveals (or hides) something once you — ding ding! — hover over it. There are lots of hover styles and effects you can play with, but today I'll be doing the most common one: fading. Firstly, though, how do you put the actual hover into your code? Well, that's easy enough to start with. Let's say I have a box.
What a lovely box. It doesn't do anything, of course. But I want to make it so that I can hover over it to change its colour. (Obviously, you can use hovers to do much more — like actually reveal information — but for the sake of a simple tutorial, I'll just be using this example.) The way to do it is to add a class in which I can specify a hover. Meaning something like [newc1ass=.edietut] for the style of the box, and [newc1ass=.edietut:hover] for the hover version. And I'm going to add the div style of my previous box into my edietut class and, under the hover one, I'll use a different hex code for the background colour.
[newc1ass=.edietut]width:120px;height:120px;background-color:#fefefe;[/newc1ass]
[newc1ass=.edietut:hover]background-color:#65d6ba;[/newc1ass]
I usually place this at the utmost top or bottom of my template, for sake of neatness. To actually build the working part of the code, I'll use a clear div and, between it and its closing tag, I'll put in the attribute and class. It should look like something along the lines of [ div ][attr="c1ass","edietut"][ /div ], without the spaces in the div tags, of course. What are we left with?
That's not a very pretty hover, though. It's really abrupt — so we're going to learn how to change that. Most importantly, the things you need to style your hover are transitions. They are as follows (you may need to add -webkit-, -ms-, -moz- or -o- for them to work in different browsers, like IE or Firefox):
transition-property: what property should be transitioned, e.g. opacity, width, etc.
transition-duration: how long your transition takes
transition-timing-function: the speed curve, like linear, ease-in, cubic bezier, whatever.
transition: all three, generally written in the order of property duration timing-function
What I usually prefer for more complex hovers is to use the last one, but for simpler ones where you don't use all three styles, you needn't. There's also transition-delay, for when you want a delay before the hover takes effect. In any case, back on topic: the fade. What you want, basically, is for the box to fade smoothly from one colour to the other. This is done by using transition-duration: 1s;, which essentially just prolongs the transition to occur over a whole second. You can use other amounts of time as well (I like 0.8s, in particular). I'm going to put this in my main newclass (not the one with the :hover selector). This is our result.
Honestly, that's about all there is to the basics of hovers. You can do a lot, a lot, and a lot more with them, of course, but I'll leave you to experiment as you wish! Also, here are some exceedingly simple hover codes for you to take a look at if you want to, just to see the kind of things you can do:
If you have any questions, don't hesitate to ask! And if you're more familiar with hovers than I am, you're more than free to contribute to the information (or point out if I wrote down any mistakes...) That’s really about all I have to share; hopefully it was useful in some way or another <3
First off, :hover is a CSS selector. It reveals (or hides) something once you — ding ding! — hover over it. There are lots of hover styles and effects you can play with, but today I'll be doing the most common one: fading. Firstly, though, how do you put the actual hover into your code? Well, that's easy enough to start with. Let's say I have a box.
This is my box.
What a lovely box. It doesn't do anything, of course. But I want to make it so that I can hover over it to change its colour. (Obviously, you can use hovers to do much more — like actually reveal information — but for the sake of a simple tutorial, I'll just be using this example.) The way to do it is to add a class in which I can specify a hover. Meaning something like [newc1ass=.edietut] for the style of the box, and [newc1ass=.edietut:hover] for the hover version. And I'm going to add the div style of my previous box into my edietut class and, under the hover one, I'll use a different hex code for the background colour.
[newc1ass=.edietut]width:120px;height:120px;background-color:#fefefe;[/newc1ass]
[newc1ass=.edietut:hover]background-color:#65d6ba;[/newc1ass]
I usually place this at the utmost top or bottom of my template, for sake of neatness. To actually build the working part of the code, I'll use a clear div and, between it and its closing tag, I'll put in the attribute and class. It should look like something along the lines of [ div ][attr="c1ass","edietut"][ /div ], without the spaces in the div tags, of course. What are we left with?
[attr="class","edietut"]
Ooh, hovers.That's not a very pretty hover, though. It's really abrupt — so we're going to learn how to change that. Most importantly, the things you need to style your hover are transitions. They are as follows (you may need to add -webkit-, -ms-, -moz- or -o- for them to work in different browsers, like IE or Firefox):
transition-property: what property should be transitioned, e.g. opacity, width, etc.
transition-duration: how long your transition takes
transition-timing-function: the speed curve, like linear, ease-in, cubic bezier, whatever.
transition: all three, generally written in the order of property duration timing-function
What I usually prefer for more complex hovers is to use the last one, but for simpler ones where you don't use all three styles, you needn't. There's also transition-delay, for when you want a delay before the hover takes effect. In any case, back on topic: the fade. What you want, basically, is for the box to fade smoothly from one colour to the other. This is done by using transition-duration: 1s;, which essentially just prolongs the transition to occur over a whole second. You can use other amounts of time as well (I like 0.8s, in particular). I'm going to put this in my main newclass (not the one with the :hover selector). This is our result.
[attr="class","edietut2"]
Much smoother now, isn't it?Honestly, that's about all there is to the basics of hovers. You can do a lot, a lot, and a lot more with them, of course, but I'll leave you to experiment as you wish! Also, here are some exceedingly simple hover codes for you to take a look at if you want to, just to see the kind of things you can do:
[attr="class","edieex"] [attr="class","edieex1"] [newclass=".edieex"]position: relative; overflow: hidden; width:120px;height:120px;background:#efefef;[/newclass] [newclass=".edieex1"]position: absolute; bottom: -120px; width: 120px; height: 120px; background: #65d6ba; -moz-transition: 1s all; -webkit-transition: 1s all; -o-transition: 1s all; transition: 1s all;[/newclass][newclass=".edieex:hover .edieex1"]bottom: 0px;[/newclass] | [attr="class","edieex4"] [newclass=.edieex4]width:120px;height:120px;background-color:#efefef;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s;-o-transition-duration: 1s;[/newclass] [newclass=.edieex4:hover]background-color:#65d6ba;border-radius: 40px;[/newclass] | [attr="class","edieex2"] [attr="class","edieex3"] [newclass=".edieex2"]width:120px;height:120px;background:#efefef;[/newclass] [newclass=".edieex3"]width: 120px; height: 120px; background: #65d6ba; -moz-transition: 1s all; -webkit-transition: 1s all; -o-transition: 1s all; transition: 1s all;-moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transform: scale(0);opacity: 0;[/newclass][newclass=".edieex2:hover .edieex3"]opacity: 1;-moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1);[/newclass] |
Get creative! Hover to see different styles!
If you have any questions, don't hesitate to ask! And if you're more familiar with hovers than I am, you're more than free to contribute to the information (or point out if I wrote down any mistakes...) That’s really about all I have to share; hopefully it was useful in some way or another <3
[newclass=.edietut]width:120px;height:120px;background-color:#efefef;[/newclass]
[newclass=.edietut:hover]background-color:#65d6ba;[/newclass]
[newclass=.edietut2]width:120px;height:120px;background-color:#efefef;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s;-o-transition-duration: 1s;[/newclass]
[newclass=.edietut2:hover]background-color:#65d6ba;[/newclass]