Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

jQuery - Sliding background color without using images

jQuery - Sliding background color without using images

Problem

So, yeah, as the titles says - is there a way to change the Background Color (on hover) of a navigation menu item using sliding animation? And without using images?

It's easy to do fading animation using jQuery or CSS3, but is there a way for the hover color to slide from left to right for example?

I know there are a lot of threads on this, but they all include using images.

Problem courtesy of: Ziik

Solution

You could do something like this:

HTML:

aosgibmoa bnocibnas

CSS:

a{
    display:inline-block;
    background:green;
    position:relative;
    padding:2px 5px;
}
a>span{
    position:relative;
}

a::before{
    content:'';
    background:red;
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:0%;
    -webkit-transition:width .3s ease-out;
}
a:hover::before{
    width:100%;
}

Demo:
http://jsfiddle.net/nsfxE/


Alternative using gradient: (thanks Bojangles)

CSS:

a{
    display:inline-block;
    background:green;
    position:relative;
    padding:2px 5px;
    background: -webkit-gradient(linear, left top, right top, color-stop(50%,red), color-stop(50.001%,green));
    background-size:200% 100%;
    background-position:0 0;
    -webkit-transition:background-position .3s ease-out;
}

a:hover{
    background-position:-100% 0;
}

Demo:
http://jsfiddle.net/nsfxE/1/

Solution courtesy of: Andy

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

jQuery - Sliding background color without using images

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×