CODEWITHSUNDEEP
htmlcss
ValenciaHQ
ValenciaHQ

Reputation: 385

How can "scale" an image without changing the size CSS

#image{
  background:red
}

#image:hover {
  transform: scale(1.1);
  transition: all .5s ease
}
<img height="200px" width="200px" id="image"/>

I need to keep the size of 200x200, something like a zoom. It should be solved only with the img element, not adding a parent.

Thanks!

Upvotes: 0

Views: 387

Answers (1)

Hao Wu
Hao Wu

Reputation: 20669

It's possible while using background-image without adding a parent element. That you can add a transition to its background-size:

#image{
  transition: background-size .5s;
  background-size: 100%;
  background-image: url(https://picsum.photos/200/200);
  background-position: center;
}

#image:hover {
  background-size: 120%;
}
<img height="200px" width="200px" id="image" />

Upvotes: 1

Related Questions