CODEWITHSUNDEEP
htmlcss
Herick
Herick

Reputation: 217

how to make scale css just image

I need to zoom in on the image, but I'm using background-url would be the equivalent of:

.fakeImg:hover img{
    transform: scale(1.1);
}

but I only want the image to grow inside the div

current state:

enter image description here

objective:

enter image description here

jsfiddle

Upvotes: 3

Views: 1636

Answers (2)

Temani Afif
Temani Afif

Reputation: 273523

You can adjust the background-size instead of scale to change only the background-image

.box {
 width:150px;
 height:150px;
 margin:50px;
 border:2px solid red;
 background-image:url("https://picsum.photos/400/400?image=1068");
 background-size:100% 100%;
 background-position:center;
 transition:1s all;
}
.box:hover {
 background-size:130% 130%;
}
<div class="box">

</div>

Upvotes: 4

Ivan
Ivan

Reputation: 40708

The scaling will work but you need to set overflow: hidden to the parent (frame) of your image.

Here is an example:

.container {
  overflow: hidden;
  width: 200px;
  height: 200px;
}

.image {
  width: 200px;
  height: 200px;
  background-image: url("https://images.pexels.com/photos/658687/pexels-photo-658687.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-size: 200px 200px;
  transition: 1s all;
}

.image:hover {
  transform: scale(1.1);
}
<div class="container">
  <div class="image"></div>
</div>

Upvotes: 4

Related Questions