Transition with fade between sprites

Navigation
1

I have a button that looks like this:

AndwhenImovethemouse,Iwantittolooklikethis:

Ok, for example, I can use: 

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

The problem is that there I can not make a effect appear slowly , type transition: all 0.5s ease 0.1s;

Is there any way to do this? if I use background-position it looks like it has a fade effect, which is not what I want.

    
asked by anonymous 21.10.2014 / 18:24

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>
    
21.10.2014 / 22:38
1

Felipe, I did something very similar in a project of mine. It looks 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 have helped.

    
21.10.2014 / 22:08
PHP function __autoload does not open subfolders How to open the Twitter site inside an Iframe