CODEWITHSUNDEEP
htmlcssanimation
user3504751
user3504751

Reputation: 147

CSS animation for hover effect

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.

Upvotes: 1

Views: 1231

Answers (2)

Rami.Q
Rami.Q

Reputation: 2476

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;
    ......
}

Upvotes: 1

eskimomatt
eskimomatt

Reputation: 185

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;
}

Upvotes: 1

Related Questions