如何在鼠标 hover 上对 CSS 背景图像创建缩小效果？

Question

在鼠标 hover 上，我想对background.jpg执行缩小效果，它位于 CSS 中的 div .bgImg上：

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

我尝试在 CSS 中使用传统的 hover 效果，但不是缩放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 中，它位于 HTML 的 rest 下方的绝对位置和 z 索引。然后，您可以使用一些 js-foo 在主要内容 div 的 hover 上添加/删除 class .

 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

尝试以下 CSS -

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

将0.6更改为您需要缩小的数量。

Answer 3

您可以在主 bgImg 中为背景图像创建一个新的 div，然后是 position: absolute; 新的 div 和 position：相对； bgImg 和 z-index：-100； 新的股利。 你必须给两个 div 相同的宽度和高度。 IE：

<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;
}