Прозрачный переход в фоновом режиме

Question

Я пытаюсь добавить эффект затухания в прозрачности на заголовок моего сайта. Прямо сейчас эффект обратный. Как я могу отменить его?

Jsfiddle Link

Кроме того, эффект прозрачности должны быть только на изображение, а не текст.

Это мой код прямо сейчас:

#header ul li a:hover{ 
    color:#FF4242; 
    background: url(http://i.imgur.com/CJub1gt.png?1?7924) no-repeat 0 0; 
    -webkit-transition: opacity 0.5s ease-out; 
    -moz-transition: opacity 0.5s ease-out; 
    -o-transition: opacity 0.5s ease-out; 
    transition: opacity 0.5s ease-out; 
    opacity: 0.5; 
} 

Answer 1

Вы можете добавить дополнительный DIV к элементу LI и использовать в качестве фона с анимацией: http://jsfiddle.net/qoc6bbnm/3/

<li><a href="">Home</a><div class="back"></div></li> 

новые значения CSS (удалить # header ul li a and #header ul li a: hover)

#header ul li a:hover{ 
    color:#FF4242; 
} 

#header ul li { 
    position:relative; 
} 

#header ul li div.back{ 
    position:absolute; 
    width:100%; 
    height:100%; 
    z-index:-1; 
    color:#FF4242; 
    background: url(http://i.imgur.com/CJub1gt.png?1?7924) no-repeat 0 0; 
    -webkit-transition: opacity 0.5s ease-out; 
    -moz-transition: opacity 0.5s ease-out; 
    -o-transition: opacity 0.5s ease-out; 
    transition: opacity 0.5s ease-out; 
    opacity: 0 
} 

#header ul li:hover div.back{ 
    opacity:1; 
}