放大圖像並在懸停上顯示div

Question

在圖像懸停時，我想放大圖像並顯示帶有透明背景的div。

演示：http://jsfiddle.net/9q4mT/

這裏是我的代碼。在下面的示例中，當我將鼠標懸停在.image類的圖像上時，我想放大它，並且想要在div的中心顯示類.mylink的鏈接。

我可以放大懸停，但是當我爲.text添加樣式時，它不會再放大圖像。

HTML：

<div id="box"> 
    <div class="image"> 
     <img src="http://s18.postimg.org/il7hbk7i1/image.png" /> 
    </div> 
    <div class="text"> 
     <a class="mylink">link</a> 
    </div> 
</div> 

CSS：

#box { 
    text-align: center; 
    margin: auto; 
    width: 250px; 
    height: 250px; 
    overflow: hidden; 
    position: relative; 
} 

.image img { 
    width: 250px; 
    height: 250px; 
    overflow: hidden; 

} 
.image img { 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    transition: all 1s ease; 
} 

.image img:hover {  
    cursor: pointer; 
    transform:scale(1.5); 
    -ms-transform:scale(1.5); 
    -moz-transform:scale(1.5); 
    -webkit-transform:scale(1.5); 
    -o-transform:scale(1.5); 
} 

.text{ 
    position: absolute;  
    width: 100%; 
    height: 100%; 
    top: 0; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    transition: all 1s ease; 
} 

.text:hover{ 
    background: rgba(255, 255, 255, 0.5);  
} 

.text a{ 
    position: absolute; 
    top: -100%; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    transition: all 1s ease; 
} 

.text:hover a{  
    top: 50%; 
} 

Answer 1

試着改變你的CSS：

• 添加display:block你的形象
• 添加初始transform scale(1)到您的IMG
• 調整懸停CSS規則#box：圖像配懸停IMG

代碼示例：http://codepen.io/jonathan/pen/MYBbMG

.image img { 
    display:block; 
    width: 250px; 
    height: 250px; 
} 

.image img {   
    -moz-transform:scale(1); 
    -webkit-transform:scale(1); 
    -o-transform:scale(1); 
    transform:scale(1); 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    transition: all 1s ease; 
} 

#box:hover .image img {  
    cursor: pointer; 
    -moz-transform:scale(1.5); 
    -webkit-transform:scale(1.5); 
    -o-transform:scale(1.5); 
    transform:scale(1.5); 
}