CSS3 animation div position 导致不可点击区域并且不触发动画

Question

我尝试做一个悬停动画，将信息从底部带到中心，问题是 div 位置点从 bootom 开始太多，导致顶部和中心区域不' 触发悬停动画，只有底部区域触发它。我怎样才能固定 div 的位置并仍然保持动画从底部开始？

这里是 fiddle link: js fiddle link

主要问题在这个 div:

.movie_thumb_wrapper .text-content {
    color: white;
    cursor: pointer;
    display: table;
    opacity: 0;
    transition: all 0.5s ease;
    transform: translate(0,-150px);
    -webkit-transform: translate(0,100px);
    -o-transform: translate(0,-50px);
    -moz-transform: translate(0,-50px);
}
user agent stylesheetdiv {
    display: block;
}

Answer 1

更改选择器

.movie_thumb_wrapper .text-content:hover

到

.movie_thumb_wrapper:hover .text-content

以便在将鼠标悬停在父元素上时发生过渡：

Updated Example

.movie_thumb_wrapper:hover .text-content {
    opacity: 1;
    transform: translate(0, -150px);
    -webkit-transform: translate(0, 0px);
    -o-transform: translate(0, -50px);
    -moz-transform: translate(0, -50px);
}

CSS3 animation div position 导致不可点击区域并且不触发动画

CSS3 animation div position cause unclickable area and not trigger the animation

html

css

animation

position