我正在尝试创建一个页面，如果用户将鼠标悬停在包装 div 内的任何图像上，图像会略微向上放大到包装 div 之外，但使用我的代码，图像只会增加它的宽度，并且它保留在 wrapper div 内，仅用于 eg :
.Wrap {
width: 100%;
border: 1px solid red;
}
.Wrap ul {
list-style: none;
padding: 15px;
}
.Wrap ul li {
display: inline-block;
padding: 20px;
transition: background-color 0.3s ease-in-out;
}
.Wrap ul li:hover {
background-color: blue;
}
.Images {
width: 100px;
transition: width 0.8s ease, height 0.8s ease;
}
.Wrap ul li:hover .Images {
width: 300px;
}<body>
<div class="Wrap">
<ul>
<li>
<img src="https://s11.postimg.org/bj57qwh8z/vlcsnap_error262.png" class="Images" alt="" id="#img1">
</li>
<li>
<img src="https://s11.postimg.org/bj57qwh8z/vlcsnap_error262.png" class="Images" alt="" id="#img2">
</li>
<li>
<img src="https://s11.postimg.org/bj57qwh8z/vlcsnap_error262.png" class="Images" alt="" id="#img3">
</li>
</ul>
</div>
</body>我还尝试使图像相对位置并将其从底部移动，但在那种情况下，只有图像向上移动，背景仍在 wrapper div 内，仅用于例如:
.Wrap {
width: 100%;
border: 1px solid red;
}
.Wrap ul {
list-style: none;
padding: 15px;
}
.Wrap ul li {
display: inline-block;
padding: 20px;
transition: background-color 0.3s ease-in-out;
}
.Wrap ul li:hover {
background-color: blue;
}
.Images {
width: 100px;
transition: width 0.8s ease, height 0.8s ease;
}
.Wrap ul li:hover .Images {
width: 300px;
position:relative;
bottom:100px;
}<body>
<div class="Wrap">
<ul>
<li>
<img src="https://s11.postimg.org/bj57qwh8z/vlcsnap_error262.png" class="Images" alt="" id="#img1">
</li>
<li>
<img src="https://s11.postimg.org/bj57qwh8z/vlcsnap_error262.png" class="Images" alt="" id="#img2">
</li>
<li>
<img src="https://s11.postimg.org/bj57qwh8z/vlcsnap_error262.png" class="Images" alt="" id="#img3">
</li>
</ul>
</div>
</body>我对输出的要求是，图像应增加其宽度，并应在其 wrapper div 上方放大约 40 到 50 像素，同时其背景保持完整。
最佳答案
自从您列出 CSS3 以来，我已尝试使用 scale() 进行转换和 translate3d()而不是 width和 height .这是您想要实现的更多目标吗？您可以在 <li> 上使用比例和翻译值和 <img>随心所欲。
您还需要添加适当的 CSS 以使其跨浏览器。
.Wrap {
width: 100%;
border: 1px solid red;
position: relative;
}
.Wrap ul {
list-style: none;
padding: 15px;
}
.Wrap ul li {
display: inline-block;
padding: 20px;
transform: scale(1) translate3d(0, 0, 0);
transition: background-color 0.3s ease-in-out, transform 0.8s ease;
}
.Wrap ul li:hover {
background-color: blue;
transform: scale(1.8) translate3d(0, -20px, 0);
}
.Images {
width: 100px;
/* transition: width 0.8s ease, height 0.8s ease; */
}
.Wrap ul li:hover .Images {
/*
width: 300px;
position:relative;
bottom:100px;
transform: scale(2);
*/
} <div class="Wrap">
<ul>
<li>
<img src="https://s11.postimg.org/bj57qwh8z/vlcsnap_error262.png" class="Images" alt="" id="#img1">
</li>
<li>
<img src="https://s11.postimg.org/bj57qwh8z/vlcsnap_error262.png" class="Images" alt="" id="#img2">
</li>
<li>
<img src="https://s11.postimg.org/bj57qwh8z/vlcsnap_error262.png" class="Images" alt="" id="#img3">
</li>
</ul>
</div>关于html - 当图像悬停在其上时，如何仅在其容器宽度的向上侧放大图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39258472/