带有溢出的过渡图像答案

【问题标题】：Transitioning image with overflow带有溢出的过渡图像
【发布时间】：2016-09-15 07:59:01
【问题描述】：

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

【问题讨论】：

我想通了...
我需要再添加一个标识符#test {width:358px, height:298px;溢出：隐藏；}

标签： css overflow transition onhover

【解决方案1】：

一想到我在这里输入的内容，我就明白了......

我需要再添加一个标识符#test {width:358px, height:298px;溢出：隐藏；}

【讨论】：

【解决方案2】：

您应该将overflow:hidden、height 和width 放在#test 上。然后将你的img width 100% 设置为#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/

【讨论】：