Sliding a background image in from the right on mixed-width navigation elements

Question

I have some navigation elements in a <ul> on the sidebar of my website. Here's the relevant markup and CSS styling:

<ul>
    <li><a href="">Blog</a></li>
    <li><a href="">Work</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Contact</a></li>
</ul>

#sidebar ul {
    list-style-type: none;
    float: right;
    position: relative;
    right: -10px;
}

#sidebar ul li a {
    display: inline-block;
    line-height: 30px;
    text-decoration: none;
    padding: 0px 10px;
    color: #555555;
}

#sidebar ul li a:hover {
    background: url('images/nav-hover.png') no-repeat;
    color: #f0f0f0;
}

When the user hovers over a navigation element (the <a> tag) I want the background nav-hover.png to slide in from the right using CSS transitions. I tried this but it doesn't seem to work:

#sidebar ul li a {
    background: none;
    transition-property: background;
    transition-duration: 1s;
    display: inline-block;
    line-height: 30px;
    text-decoration: none;
    padding: 0px 10px;
    color: #555555;
}

#sidebar ul li a:hover {
    background: url('images/nav-hover.png') no-repeat;
    color: #f0f0f0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

How can I get this to happen?

JSFiddle link: http://jsfiddle.net/2EfYa/

First, it's always helpful to have a jsfiddle or [codepen](http://codepen.io/) example of your issue. Second, your post may be a duplicate of [this](http://stackoverflow.com/questions/9483364/css3-background-image-transition) SO post. — Nick Tomlin, Jan 02 '13 at 19:28
Added a jsfiddle example. That post is for fading in and out which I think is different because I need to animate the `background-position` property I think but I'll give it a shot :) — James Dawson, Jan 02 '13 at 19:36

score 0 · Accepted Answer · answered Jan 02 '13 at 19:41

0

You need to make a transition for the background-position:

http://jsfiddle.net/vQgEd/ - maybe only works on webkit

ul li a {
    background: url('http://lorempixel.com/400/200') -100% 0px no-repeat;
    transition: background-position 1s;
    -webkit-transition: background-position 1s;
    display: inline-block;
    line-height: 30px;
    text-decoration: none;
    padding: 0px 10px;
    color: #555555;
}

ul li a:hover {
    background-position:left top;
    color: #f0f0f0;
}

answered Jan 02 '13 at 19:41

Bastian Rang

2,137
1
19
25

Thanks, this seems to work. Only problem is it seems to take a while for the animation to kick in. What I mean is I only see the background sliding in after I've had my mouse hovering for about half a second, which is odd as there's no transition delay. – James Dawson Jan 02 '13 at 19:46
just play around with your original image and set the left-position pixelready. my solution justs shows how it works, its not fine-tuned :-) – Bastian Rang Jan 02 '13 at 19:48
I think I found why. The navigation elements are all a different widths so when I do `-100%` for the background position the background starts more to the right of the element than I want. Ideally I'd like it to start 1 pixel right of the element, if that makes sense. But like you say, the question is answered and I'll accept it now :) – James Dawson Jan 02 '13 at 19:50
and don't forget to add the missing browser-prefixes. -o-transition and -moz-transition. – Bastian Rang Jan 02 '13 at 19:51

Sliding a background image in from the right on mixed-width navigation elements

1 Answers1