溢出过渡图像

我正在尝试在图像上使用过渡。这是我想要做的。悬停时，图像的大小应增加至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

谢谢，我真的想通了，只要我发布这... –

溢出过渡图像

回答

相关问题