CODEWITHSUNDEEP
htmlcsssvg
user8033359
user8033359

Reputation:

Resizing transition is 0.6s when i hover svg image but on mouseout it rapidly decresed in size

Is there any way to apply 0.6s transition on mouseout so that #img goes to its initial size in duration of 0.6 seconds??? here is the code...

#img {
  width: 200px;
  height: 150px;
}

#img:hover {
  transition: 0.6s;
  width: 220px;
  height: 170px;
}
<div class="container">
  <a href="#">

    <img src="shopping-cart.svg" id="img" />

  </a>
</div>

Upvotes: 1

Views: 39

Answers (1)

Richard Parnaby-King
Richard Parnaby-King

Reputation: 14862

You need to put the transition on the #img not the :hover, otherwise the transition only applies when you hover onto the element:

#img {
  width: 200px;
  height: 150px;
  transition: 0.6s;
}

#img:hover {
  width: 220px;
  height: 170px;
}
<div class="container"><a href="#"><img src="shopping-cart.svg" id="img" /></a></div>

Upvotes: 4

Related Questions