Эффект затухания при развороте div?

Question

Следующие примеры найдены на Fade Effect on Link Hover?

Я сделал это: http://jsfiddle.net/felipelalli/ns9d1vug/

<div class="fade"/> 

.fade { 
-o-transition: 0.3s; 
-moz-transition: 0.3s; 
-khtml-transition: 0.3s; 
-webkit-transition: 0.3s; 
-ms-transition: 0.3s; 
transition: 0.3s; 

width:128px;height:128px; 
background:url('http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png') 
} 

.fade:hover { 
color: #b50000; 
    width:128px;height:128px; 
background:url('http://upload.wikimedia.org/wikipedia/commons/b/b2/Crystal_128_babelfish.png') 
} 

Почему он прекрасно работает в Chrome, но не Firefox?

Answer 1

It не работает в FF, потому что Firefox не поддерживает переход фонового изображения, только фонового цвета. Если вы хотите перейти на фоновое изображение, используйте две отдельные <div>:

.fade div { 
 
-o-transition: 0.3s; 
 
-moz-transition: 0.3s; 
 
-khtml-transition: 0.3s; 
 
-webkit-transition: 0.3s; 
 
-ms-transition: 0.3s; 
 
transition: 0.3s; 
 
width:128px; 
 
    height:128px; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
} 
 
.fade{ 
 
    position:relative; 
 
    width:128px; 
 
    height:128px; 
 
    } 
 
.backone{ 
 
    z-index:1; 
 
    background:url('http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png'); 
 
    } 
 
.backtwo{ 
 
background:url('http://upload.wikimedia.org/wikipedia/commons/b/b2/Crystal_128_babelfish.png'); 
 
    opacity:0; 
 
z-index:5; 
 
} 
 
.fade:hover .backtwo{ 
 
opacity:1; 
 
} 
 
.fade:hover .backone{ 
 
opacity:0; 
 
}

<div class="fade"> 
 
<div class="backone"></div> 
 
<div class="backtwo"></div> 
 
</div>

Answer 2

Вы должны использовать два разных элемента и исчезать между ними вместо того, чтобы менять фоновое изображение для одного элемента.

эти ребята сделал пример: http://css3.bradshawenterprises.com/cfimg/

Я не думаю, что вы должны быть в состоянии сделать это, но, видимо, Chrome просто быть хорошим для вас ... :-)