Simple CSS reverse transition

Question

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?

Thank you for your answer. Will look further into it. Could be classes breaking it — perkapls
– perkapls, Commented Nov 10, 2015 at 19:37

BCDeWitt · Accepted Answer · 2015-11-10 19:36:51Z

4

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

answered Nov 10, 2015 at 19:36

BCDeWitt

4,8232 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

perkapls Over a year ago

Thank you all for answering. This is a solution to my problem! :)

perkapls Over a year ago

Sorry, new to this site. Done. Thanks again.

im_benton · Accepted Answer · 2015-11-10 19:36:21Z

0

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

answered Nov 10, 2015 at 19:36

im_benton

2,6314 gold badges23 silver badges30 bronze badges

Comments

showdev · Accepted Answer · 2015-11-10 22:34:53Z

-2

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

edited Nov 10, 2015 at 22:34

showdev

29.3k37 gold badges61 silver badges82 bronze badges

answered Nov 10, 2015 at 19:37

Anuj Rastogi

986 bronze badges

4 Comments

Qwertiy Over a year ago

How does it relates to question?

Anuj Rastogi Over a year ago

I have just set a jsfiddle link to help with demo.

j08691 Over a year ago

Your answer should contain all relevant code and an explanation as to what your solution is. Don't put a link to an offsite resource in the comments as part of it. Then there's also the issue of how your code is different from that in question.

Qwertiy Over a year ago

1. I understand it. The code there is not related to the question. 2. You have to include code as a snippet into you answer.

Collectives™ on Stack Overflow

Simple CSS reverse transition

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related