html - 使用 CSS 为框中的图像设置动画

Question

我正在尝试在鼠标悬停时为图像设置动画。

图像应始终保持在框的范围内。它应该有一点不透明度。当图像悬停时，它会被缩放并且不透明度会变为 1，所有这些都是在 0.3 秒的短时间内而不是一次全部完成。

我写的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/

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 example

要隐藏图像不离开父 div，只需将 overflow: hidden 添加到 div:

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