Background-color transition effect on transparent background div?

0
votes

I have a div that displays a back to top arrow image(sprite). I am changing the background-position using css to achieve the color change.

How can I transition the color of the arrow without using background-position transition? I am looking for a background-color transition effect but I can't use it since I want the background of the div to be transparent. Hope my question isn't too confusing.

http://jsfiddle.net/9stkQ/

css:

.top{
    background:url(../images/top.png) -10px -10px;
    background-repeat:no-repeat;
    width:20px;
    height:20px;
    display:block;
    margin:0 auto;
    cursor:pointer;
}

.top:hover{
    background:url(../images/top.png) -10px 30px;
}
2
csshtmlbackgroundcss-transitions
We'd need to see a working JSfiddle with linked images to understand what it is you are trying to achieve. - Paulie_D
Is this clear enough? jsfiddle.net/9stkQ - zefs

2 Answers

1
votes

You can transition between 2 sprites of the same image this way:

.top{
    background:url(http://placekitten.com/200/300) 0px 0px;
    background-repeat:no-repeat;
    width:100px;
    height:100px;
    display:block;
    margin:0 auto;
    cursor:pointer;
    position: relative
}

.top:after {
    content: '';
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background:url(http://placekitten.com/200/300) 100px 0px;
    opacity: 0;
    -webkit-transition: opacity 1s;
    transition: opacity 2s;
}

.top:hover:after {
    opacity: 1;
}

Since you are displaying the second sprite in a pseudo element, the transition doesn't "move"

fiddle

0
votes

An alternative is not to use an image but rather a pseudo element.

JSFiddle Example

.top {
    position:relative;
    width:0;
}

.top:before {
    position:absolute;
    border:20px solid transparent;
    border-bottom:20px solid red;
    content:"";
}

.top:hover:before {
    border-bottom:20px solid green;
}