画像の上にカーソルを置くと大きくなりません

Question

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

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

ビューコードの結果。