CODEWITHSUNDEEP
csscss-transitionstransform
davvv
davvv

Reputation: 792

CSS3 mouseout transition not working as expected

I have some CSS3 hover effects to animate an image caption:

.imageDetails {
    width: 100%;
    height: 360px;
    position: absolute;
    bottom: -100px;
    opacity: 0;
    color: white;
    background-color: black;
}

.item:hover .imageDetails {
    bottom: 0;
    -webkit-transition: all 0.5s, -webkit-transform 0.5s;
    transition: all 0.5s, transform 0.5s;
    width:100%;
    height: 330px;
    opacity:1;
}

.readMoreLink {
    color:#ACACAC;
    opacity: 0; 
    text-align: center;
}

.item:hover .readMoreLink {
    -webkit-transition-duration: 2s; /* Safari */
    -webkit-transition-delay: 1s; /* Safari */
    transition-duration: 2s;
    transition-delay: 1s;
    opacity: 1;
}

On hover it works a treat, but on mouseout is just clears. I would like it to slide out too.

I tried to use the following, but is misbehaves. 

.item:hover .imageDetails:not( :hover ){
    bottom: -100px;
    -webkit-transition: all 0.5s, -webkit-transform 0.5s;
    transition: all 0.5s, transform 0.5s;
    width:100%;
    height: 330px;
    opacity:1;
}

Can I add a slide out effect with CSS or is jQuery better suited to this sort of thing?

Upvotes: 1

Views: 1659

Answers (1)

ad_on_is
ad_on_is

Reputation: 1550

You need to apply your transition properties to the non-hovered class as well, like this:

.readMoreLink {
  color:#ACACAC;
  opacity: 0; 
  text-align: center;
  -webkit-transition-duration: 2s; /* Safari */
  -webkit-transition-delay: 1s; /* Safari */
  transition-duration: 2s;
  transition-delay: 1s;
}

.item:hover .readMoreLink {
  -webkit-transition-duration: 2s; /* Safari */
  -webkit-transition-delay: 1s; /* Safari */
  transition-duration: 2s;
  transition-delay: 1s;
  opacity: 1;
}

See here: https://jsfiddle.net/bLmw0xzu/

Upvotes: 5

Related Questions