CODEWITHSUNDEEP
csstransitionreverse
perkapls
perkapls

Reputation: 23

Simple CSS reverse transition

CSS beginner here

img {
    top: 0;
    transition: all 0.5s ease-out;
}
img:hover {
    position: relative;
    top: -5px;
}

On hover, this transition works fine. But when you mouse away again there is no effect, the 'reverse' transition is instant. How to achieve 0.5s on reverse transition too?

Upvotes: 2

Views: 120

Answers (3)

Anuj Rastogi
Anuj Rastogi

Reputation: 98

This issue has been corrected. Please take a look.

img {
  width: 136px;
  height: 23px;
  -webkit-transition: width 2s;
  /* For Safari 3.1 to 6.0 */
  transition: width 2s;
}
img:hover {
  width: 300px;
}
<div style="background-color:red;">
  <img src="http://jsfiddle.net/img/logo.png">
</div>

View on JSFiddle

Upvotes: -2

BCDeWitt
BCDeWitt

Reputation: 4773

Simply move position: relative from the :hover rule to the img rule. When not hovered, the img element isn't being positioned relatively. The top property doesn't do anything on a statically positioned element.

img {
    position: relative;
    top: 0;
    transition: all 0.5s ease-out;
}
img:hover {
    top: -5px;
}

Upvotes: 4

im_benton
im_benton

Reputation: 2621

img {
    position: relative;
    top: 0;
    transition: all 0.5s ease-out;
}
img:hover {
    top: -5px;
}

Upvotes: 0

Related Questions