Faded transition between sprites

Asked

Viewed 137 times

1

I have a button that’s like this:

inserir a descrição da imagem aqui

And when I pass the mouse, I want it to stay that way:

inserir a descrição da imagem aqui

Okay, for example, I can use:

.unidades:hover{background-position: center -49px;}

The problem is that then I can’t do an effect appear slowly, guy transition: all 0.5s ease 0.1s;

Is there any way to do that? if I use the background-position seems to have an effect of fade, that’s not what I want.

css

  • When you say "appear slowly", it would be from invisible to visible, or "walking" from one image to another?

  • From invisible to visible, using the transition, example, which I put there. This works with background-color, if I use with background-image he doesn’t do.

  • background-image is not a property that can be animated. You have to update the question with your own Markup to make some adjustment to it in order to simulate the animation.

  • You talking that the backgroound-image can’t be excited, already solved my problem. I’ll have to do with Jquery, make a div, that when I hover over it, the other one appears div with the class of hover

2 answers

5


A simple example with button:

.opa, .opa span {
  position:relative;display:block;
  width:60px;height:60px;
  margin:0;padding:0;
  border:none;
}

.opa {
  background: url(http://i.stack.imgur.com/IO1RB.jpg);
}
.opa span {
  background: url(http://i.stack.imgur.com/cCrYi.jpg);
  transition: opacity .7s;
  opacity:0;
}

.opa:hover span {
  opacity: 1;
}
<button class="opa">
  <span></span>
</button>

1

Felipe, I did something very similar in a project of mine. It was like this:

HTML 

<div id="navLateral">
        <ul>
            <li class="item1">
                <a href="#">OP1</a>
            </li>
            <li class="item2">
                <a href="#">OP2</a>
            </li>
            <li class="item3">
                <a href="#">OP3</a>
            </li>
        </ul>
    </div>

CSS3

#navLateral{
right: -70px;
position: fixed;
top: 300px;
z-index: 100;
}
#navLateral li{
background-color: #3e3e3e;
height: 50px;
margin-bottom: 10px;
position: relative;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
list-style:none;
}
#navLateral li:hover{ margin-left: -80px; }
#navLateral a{
background-color: #3e3e3e;
background-repeat: no-repeat;
background-position: 5px center;
color: #ffffff;
display: block;
font-size: 14px;
height: 50px;
line-height: 50px;
padding-left: 70px;
width: 130px;
text-decoration:none;
}
#navLateral .item1 a{ background-image: url(../images/suaimg.png); }
#navLateral .item2 a{ background-image: url(../images/suaimg.png); }
#navLateral .item3 a{ background-image: url(../images/suaimg.png); }

I hope I’ve helped.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.