CODEWITHSUNDEEP
htmlcsstransition
user7805580
user7805580

Reputation:

CSS transition out error

and sorry for my horrible english. I have got a problem with CSS and transition.

I need to make a div 100px x 100px, it's just an example of course.

When I put cursor hover it, it should grow and be 500px x 500px.

And here, everything is fine and working. The thing is, when i remove the cursor, I need that the div return back to 100x100px, but it won't have a transition, it just disappear and return 100x100px. How can I fix this?

Here is the code i use.

<html>
<head>
  <style>
    div.resize {
      width: 100px;
      height: 100px;
      background: rgb(80,80,80);
      }
      div.resize:hover {
      width: 500px;
      height: 500px;
      transition-duration: 1s;
      }
  </style>
</head>
  <body>
   <div class="resize"></div>
  </body>
</html>

Upvotes: 2

Views: 1886

Answers (2)

blackandorangecat
blackandorangecat

Reputation: 1344

Here you go. Just move the transition to the container rather than the :hover. I included the prefixes for other browsers as well. If you want to see how you can modify the transitions, check out W3 Schools.

div.resize {
  width: 100px;
  height: 100px;
  background: rgb(80, 80, 80);

  -webkit-transition: all 1s ease; /* Safari and Chrome */
  -moz-transition: all 1s ease; /* Firefox */
  -o-transition: all 1s ease; /* IE 9 */
  -ms-transition: all 1s ease; /* Opera */
  transition: all 1s ease;

}

div.resize:hover {
  width: 500px;
  height: 500px;
}
<body>
  <div class="resize">
  </div>
</body>

Upvotes: 1

Mr. Hugo
Mr. Hugo

Reputation: 12590

Currently you are saying that there can only be an animation while hovering. You want the animation to reverse once you have left the element (you no longer hover), but that is not allowed, as the div without hover has no animation set.

Just put the transition-duration: 1s on the 'div.resize' instead of on the 'div.resize:hover' and it is fixed.

Upvotes: 2

Related Questions