悬停效果的CSS动画

Question

I have a jsfiddle set up of the code I have so far. Basically I can't seem to make the rollover animation happen with hover for the main body of text in each ul.

So when you rollover the individual areas the code for opacity on these classes.....

.browser .statistic,
.browser .download {
  display: block;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;

Becomes 1. But i can't seem to get the transition animation to happen Can someone point me in the right direction.

Cheers, Greg.

Answer 1

you need to set the transition on the main class of the object you are trying to animate, not on the class you are adding on hover

.initial-element{
  opacity:1;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
.initial-element:hover{
  opacity:0;
}

Answer 2

sorry if i missunderstanding you.

i just added:

li:hover .browser * {
    opacity: 1;
    -webkit-transition:opacity 1500ms ease-out;
    -moz-transition:opacity 1500ms ease-out;
    -o-transition:opacity 1500ms ease-out;
    transition:opacity 1500ms ease-out;
}

DEMO: http://jsfiddle.net/zn09vjbv/1/

UPDATE:

is there any way to get the "h2 span" class to also change its background position when the li is hover ?

yes, just add this: (add any attribute you like inside this class)

li:hover .browser h2 {
    background: #000;
    color; #FFF;
    ......
}