Question

我是css的新手，当我将鼠标悬停在它们上面时，我试图让2张图片更大，但它无法正常工作。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

在＆＃34;整页＆＃34;中查看代码结果中心效应的模式。

将鼠标悬停在图像上使其变大并不起作用

1 个答案: