CODEWITHSUNDEEP
htmlcsscss-transitionscss-animations
JT1
JT1

Reputation: 97

CSS3 Hover Animation not responding

I am trying to get figcaption caption to appear fade in/animate on hover on the bottom. But i cannot get the figcaption div tag seems to disappear off the screen.

I want it so that when you hover over the banner, the figcaption appears regardless over where the mouse is hovering over.

i have 4 elements: - the background image - gradient overlay - description - figcaption

the current code i have is: http://jsfiddle.net/fGF8E/

Upvotes: 0

Views: 77

Answers (1)

Maulik Anand
Maulik Anand

Reputation: 1459

DEMO

.figcaption {
    z-index: 4;
    position: absolute;

    height: 50px;
    width: 100%;

    bottom: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
    transition: transform 0.4s, opacity 0.1s 0.3s;
}

.landing-cover:hover .figcaption{
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s;
    transition: transform 0.4s, opacity 0.1s;
}

Upvotes: 1

Related Questions