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

我是新来的css，当我将鼠标悬停在它们上方时，我试图增大2张图像，但它不起作用。将鼠标悬停在图像上以使其变大不起作用

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

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

来源

2017-09-22 ABAABABAAAABBAAAABBA

使用一些[占位符图片]（https://placeholder.com/）来进一步说明您的问题可能很有用。另外，你到目前为止尝试解决这个问题？ –

冒号后面的空格是错误的，并且您的imagezoom元素没有背景大小。其内部的形象。正确：'.imagezoom：hover img' –

这里是你的小提琴：https://jsfiddle.net/9oq6vcck/ –

此代码使用占位符图像看到的结果。另外，我从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>

查看代码，结果在中心效应 “全页” 模式。

来源

2017-09-22 18:08:56 slevy1

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

回答

相关问题