Question

我正在尝试在图片上使用转场。这是我想要它做的。悬停时，图像的大小应增加到400 x 400px的宽度。

转换时我不希望它做的是：

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

Answer 1

一想到我在这里打字的东西，我就把它想出来了......

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

Answer 2

您应该将overflow:hidden，height和width放在#test上。然后将img宽度设置为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/

转换溢出

2 个答案: