как сделать масштаб CSS просто изображение

Question

Мне нужно увеличить изображение, но я использую background-url, что эквивалентно:

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

, но я хочу, чтобы изображение росло только внутри div

текущее состояние:

цель:

jsfiddle

Answer 1

Масштабирование будет работать, но вам нужно установить overflow: hidden для родительского элемента (рамки) вашего изображения.

Вот пример:

.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>

Answer 2

Вы можете настроить background-size вместо scale, чтобы изменить только 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>