使用CSS在框内动画图像

Question

我正在尝试在鼠标悬停时动画一个图像。 该图像应始终保持在框内。它应该有一点不透明度。当图像被悬停时，它会被放大并且透明度会在0.3秒的短暂时间内变为1，而不是立即变为1。 我编写的CSS如下：

    .t_box {
    width: 250px;
    height: 160px;
    background-color: #ccc;
    border: 5px solid #FF0000;
    position: relative;
    z-index: 40;
}

.t_box img {
    max-height: 100%;
    max-width: 100%;
    opacity: 0.6;
    transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
}

.t_box img:hover {
    opacity: 1;
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);

    transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
}

现在，不透明度在0.3秒内淡入/淡出，但图像缩放是一次性的，并且不保持在包裹框的范围内。 这是fiddle链接: http://jsfiddle.net/uungtt8q/

- MultiDev

---

我不是CSS3转换的专家，但这是你想要的吗？http://jsfiddle.net/j08691/uungtt8q/2/? - j08691

是的，只是图片不应该在悬停时超出框架范围。 - MultiDev

啊，像这样 http://jsfiddle.net/j08691/uungtt8q/3/? - j08691

是的，完全正确！非常感谢你！ - MultiDev

好的，我会将其作为答案发布。 - j08691

Answer 1

只需在图片的普通状态下设置过渡效果，而不是在普通状态和悬停状态下都设置：

.t_box img {
    max-width: 100%;
    opacity: 0.6;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;vertical-align:bottom
}
.t_box img:hover {
    opacity: 1;
    -ms-transform: scale(1.5);
    /* IE 9 */
    -webkit-transform: scale(1.5);
    /* Chrome, Safari, Opera */
    transform: scale(1.5);
}

jsFiddle实例

为了让图片不超出父级div的范围，只需在div中添加overflow: hidden即可：

.t_box {
    width: 250px;
    background-color: #ccc;
    border: 5px solid #FF0000;
    position: relative;
    z-index: 40;  
    overflow:hidden;
}

- j08691