Как создать эффект уменьшения на фоновом изображении CSS при наведении курсора мыши?

Question

При наведении курсора мыши я хочу применить эффект уменьшения масштаба для background.jpg, который находится на div .bgImg в CSS:

background-image: url(/assets/background.jpg)

Я пробовал использовать традиционный эффект наведения в CSS, но вместо увеличения background.jpg он увеличивает все остальные элементы в теге div. Я хочу только увеличить фоновое изображение.

Вот мой полный пример кода:

.bgImg
{
    background-image: url(/assets/background.jpg);
    min-height: 520px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    transition: transform .2s;

}

<div class="bgImg">
 <app-navbar></app-navbar>
   <h1 class="profileName">XYZ &nbsp;&nbsp;XYZ</h1>
  <img class="omi" src="/assets/abc.jpg" width="80" height="100" alt="Image Not Found">
</div>

Answer 1

С вашим текущим каркасом HTML масштабирование размера фонового изображения также приведет к масштабированию других элементов, содержащихся в этом div.

.bgImg
{
    background-image: url(http://placekitten.com/900/50);
    min-height: 520px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    transition: transform .2s;

}
.bgImg:hover {
  transform: scale(0.6)
}

<div class="bgImg">
 <app-navbar></app-navbar>
   <h1 class="profileName">XYZ &nbsp;&nbsp;XYZ</h1>
  <img class="omi" src="http://placekitten.com/50/50" width="80" height="100" alt="Image Not Found">
</div>

Вместо этого переместите фоновое изображение в его собственный div, который позиционируется как абсолютный и индексируется по оси z под остальной частью вашего HTML. Затем вы можете использовать бит js -foo для добавления / удаления класса при наведении курсора на основной блок содержимого.

var zoomed = false;
const fnZoom = () => {
  if (zoomed) 
    document.getElementsByClassName("bgImg")[0].classList.add("zoomy");
  else
    document.getElementsByClassName("bgImg")[0].classList.remove("zoomy");
  zoomed = !zoomed;
}

let mw = document.querySelector('.mainWrapper');
mw.onmouseover = fnZoom;

.posAbs{position:absolute;top:0;left:0;width:99vw;height:99vh;}
.zoomy {transform: scale(1.1);}

.addBorder{border:1px solid cyan;}
h1{width:fit-content;margin:0 auto;color:darkcyan;}
img{display:inherit;margin: 0 auto;}

.bgImg{
    z-index: -1;
    filter:blur(5px);
    background-image: url(https://loremflickr.com/640/360);
    XXmin-height: 520px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: transform .2s;
}

<div class="bgImg posAbs addBorder"></div>
<div class="mainWrapper posAbs addBorder">
   <app-navbar></app-navbar>
   <h1 class="profileName addBorder">HOVER ME</h1>
  <img class="omi addBorder" src="http://placekitten.com/300/200" />
</div>

Answer 2

вы можете создать новый div для фонового изображения внутри основного bgImg, затем position: absolute; новый div и position: relative; bgImg и z-index: -100; новый div. Вы должны дать обоим div одинаковой ширины и высоты. Т.е.:

<div class='bgImg'>
  <div class='new_div'></div>
</div>

css:

.bgImg {
  width: 500px;
  height: 500px;
  position: relative;
}
.new_div {
  background-image: url(image.jpg);
  width: 500px;/* or left: 0; right: 0; */
  height: 500px;/* or top: 0; bottom: 0; */
  position: absolute;
  z-index: -100;
  transition: transform .2s;
}

Answer 3

Попробуйте следующее CSS -

.bgImg:hover {
  transform: scale(0.6)
}

Измените 0.6 на величину, необходимую для уменьшения.