將鼠標懸停在圖像上以使其變大不起作用

我是新來的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

將鼠標懸停在圖像上以使其變大不起作用

回答

相關問題