Hover animation activating on load instead of hover- any ideas?

[jemfrim949]

I am working with the 3d animation box shadowing effect. I am able to get the design I want however the hover effects are occuring onload instead of when the mouse is hovering over.

 

here is my

See the Pen wlFno by anon (@anon) on CodePen

 

How do I make it so the green border and black background only appear when hovering? 

 

Note: sometimes the green pulse only occurs on hover (I would say it works) however the black background comes in permanently when it should only turn black on hover.

 

cheers

[Rodrigo]

HI,

 

Just a syntax issue. Turns out that your tween is not paused, so as soon as everything in the page is loaded the tween is created and starts playing immediately. Just add paused:true to the config object:

var t = TweenLite.to(element, time, {vars, paused:true});

Now if you're trying to get a pulsating effect you might want to look at this sample I made some time ago:

 

See the Pen gmkEr?editors=001 by rhernando (@rhernando) on CodePen

 

Rodrigo.

[jemfrim949]

Thanks for the codepen the pulse animation looks a lot better now.

 

I still cannot get the background color to shift to black and the text color to white upon mouse enter. here is my updated

See the Pen teozD by anon (@anon) on CodePen

[Carl]

I'm assuming your background-color and text color issue is being addressed in your other thread: http://forums.greensock.com/topic/9392-need-help-incorporating-hover-animation-to-nested-elements/ correct?