将鼠标悬停在图像上使其变大不起作用[重复]答案

【问题标题】：Hovering over an image to make it larger doesn't work [duplicate]将鼠标悬停在图像上使其变大不起作用[重复]
【发布时间】：2018-03-04 08:40:51
【问题描述】：

我是 css 新手，当我将鼠标悬停在它们上方时，我试图放大 2 张图像，但它不起作用。

.imagezoom img {
	position: relative;
	float: left;
	margin: 50px 5px 0px 42px;
	border-color: rgba(143, 179, 218, 0.5);
	background-size: 100%;
	background-position: center;
	}
	
.imagezoom: hover {
	background-size: 110%;
	}

<div class="imagezoom"><img src="images/park.jpg" border="5" width="300" height="250">     
      </div>
      
      <div class="imagezoom"><img src="images/statue.jpg" border="5" width="300" height="250">     
      </div>

【问题讨论】：

使用placeholder images 来进一步说明您的问题可能会很有用。另外，到目前为止，您尝试过什么来解决它？
冒号后面的空格是错误的，并且您的 imagezoom 元素没有背景大小。它里面的图像。正确：.imagezoom:hover img
这是给你的小提琴：jsfiddle.net/9oq6vcck

标签： html css

【解决方案1】：

此代码使用占位符图像来查看结果。另外，我向here 慷慨地借用了css 代码。请注意，背景图像 div 包裹在外部 DIV 中，这对于实现悬停时的缩放效果至关重要。悬停时，外部 DIV 将被放大以适应内部 div 与背景图像的较大尺寸。

html, body {
    height: 100%;
}

div.wrap {
    height: 350px;
    margin-top:0;
    margin-bottom:0;
    margin-left:auto;width:100%;margin-right:auto;
    overflow: hidden;
    position: relative;
}

div.wrap > div {
    position: absolute;
    top: 10vh;
    left: 33vw;
    height: 200px;
    width: 400px;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    background-image: url('http://lorempixel.com/400/200/sports/1/' center center no-repeat);
    -moz-background-size: 100%;
    -webkit-background-size: 100%;
    background-size: 100%;
    z-index: -1;
}

div.wrap:hover > div {
    -moz-transform: scale(1.10,1.10);
    -webkit-transform: scale(1.10,1.10);
    transform: scale(1.10,1.10);    
}

<div class="wrap">
<div class="imagezoom"><img src="http://lorempixel.com/400/200/sports/1/" border="5" width="400" height="200"> </div>
</div>

以“整页”模式查看代码结果以获得居中效果。

【讨论】：