How to make CSS "rollover" links when hovering?

[Jason]

Hey everyone! My first post here, although I’m a regular viewer of this website — one of the awesomest websites I know of!

Anyway, I’ve come across websites that have “rollover links”, but I always forget to Firebug ’em and figure out what they did. I know they’re pure CSS though, and no javascript.

Basically, the links are kind of like a box (for instance, a blue box), and they roll over when you hover. I like the ones that don’t roll over too quickly, but not too slowly either.

I thought they were really cool. Does anybody know how to accomplish this effect? It’s for a WordPress site, but I’d like to know how to do this in general. Any guidance would be truly appreciated!

[Paulie_D]

It is difficult to help you as your description is a little vague.

Do you have an example of what you are after we could look at?

At first glance it sounds like you are looking for a hover state with a transition.

[Jason]

Hi, Paulie, thanks for responding!

They’re kind of like the links on http://www.therealfranktaaffe.com/ ….

Those links are relative remedial for people here, but were accomplished by doing this:

#footer a:hover {
    color: white;
    background-color: #36C0FF;
    -moz-transition: all .6s linear;
    -webkit-transition: all .6s linear;
    -o-transition: all .6s linear;
    transition: all .6s linear;
    text-decoration: none;
    outline: none;
}

But instead of just changing color in a block-form with a fade transition as in these links, I would like the links to kind of “rotate” … literally, as if you were in bed, rolling over from one side to the other.

Does that make sense? I really wish I’d have bookmarked the websites where I have seen these.

Thanks again for taking the time to respond!

[Jason]

Actually this is a better example here … the 3rd effect … but instead of a fade (in or out), or sliding up or down like curtains, I’m trying to get the links to roll over — as I mentioned above — as if you were rolling over in bed from one side to the other: http://www.webtutorialplus.com/demo/link-hover-effects/default.html

[Jason]

I actually found the EXACT type of effect I’m trying to incorporate into the links on a WordPress site — now I just have to figure out how to do it.

It’s the second row of links found here: http://tympanus.net/Development/CreativeLinkEffects/ … where the rectangular box rolls over.

I’d like to put that into my theme’s custom CSS on a WordPress site, if possible. Do I need javascript to do this? Any guidance would be appreciated!

[Jason]

Okay, here is another example of the EXACT type of effect I’m looking for. I would purchase it from this author as I’m a Code Canyon junkie, but unfortunately, it doesn’t work in IE 10. Working demo: http://codecanyon.net/item/roll-link-wordpress-plugin/full_screen_preview/5262045 …

This gentleman has it on his website, and as you can see, it doesn’t work in IE 10: http://www.deutsche-stadtnachrichten.de/aus-allen-regionen/nordrhein-westfalen/stadt-frechen/2013/08/03/schuetzenfest-bachem/

[Paulie_D]

Well, as you say, it doesn’t work in IE10 so you would have to provide an acceptable fallback.

Or are you saying it HAS to work in IE10 exactly as it does in Chrome etc?

[Jason]

Hi Paulie. Yes, I would like it to work in all browsers short of a dinosaur browser like IE8. I know CSS transforms and transitions work in IE9+, but I’m just completely clueless how I can encode this into a WordPress website.

Even the perfect transition, the second row of links on http://tympanus.net/Development/CreativeLinkEffects/ … doesn’t work properly in IE 10.

I’m not sure if I should throw in the towel on this one, or if it’s still possible to achieve this effect. Even if it doesn’t work in IE exactly like it does in Chrome or FF, if it had a 3D transform roll over, that would be good enough.

Thanks again for any help you can offer, Paulie!

[Paulie_D]

I don’t think WP is a factor…WP uses HTML & CSS like all other sites it just puts the content into templates.

http://caniuse.com/transforms3d

My suggestion would be to try creating a test menu in Codepen that we could fork and tinker with until you get something that would be acceptable.

[Author]

Posts