溢出過渡圖像

我正在嘗試在圖像上使用過渡。這是我想要做的。懸停時，圖像的大小應增加至400 x 400像素的寬度。溢出過渡圖像

我不希望它做什麼時，它轉變：

（1）影響頁面上的其他元素。

（2）隱藏圖像，當它超過它的原始尺寸（這裏我遇到了溢出：隱藏;問題）

這裏取到另一個文檔我的代碼，這樣我就可以在它的工作不看在所有其他代碼中。

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
</head> 

<body> 
<style> 
#test img {width:358px; 
      height:298px; 
      transition: all 1s ease; 
      overflow: hidden;} 

#test:hover img {width: 450px; 
       height:400px;} 
</style> 

<div id="test"> 
<img src="Portfolio/Hair_Salon/images/stylist1.png"> 
</div> 
</body> 
</html>

來源

2016-09-15 Nick Wilson

我想通了...... –

我需要增加一個標識符#TEST {寬度： 358px，height：298px;溢出：隱藏;} –

我馬上理解了它，因爲我思考了一下，我在這裏打字...

我需要增加一個標識符#TEST {寬度：358px，高度：298px; overflow：hidden;}

來源

2016-09-15 08:03:38

您應該在#test上放置overflow:hidden,height和width。然後100％設定你的IMG寬度#test

這裏的工作示例

#test { 
    width : 358px; 
    height : 298px; 
    overflow:hidden; 
} 

#test img { 
    width : 100%; 
    height : 100%; 
    transition: all 1s ease; 
} 
#test img:hover { 
    width: 450px; 
    height:400px; 
} 

<div id="test"> 
    <img src="http://www.nzhistory.net.nz/files/hero_jean-batten-1934_1.jpg"> 
</div>

這裏的小提琴https://jsfiddle.net/mc6v6r71/

來源

2016-09-15 08:09:20

謝謝，我真的想通了，只要我發佈這... –

溢出過渡圖像

回答

相關問題