Html CSS3动画div位置导致不可拾取区域，不会触发动画

我尝试过做一个悬停动画，它将信息从底部带到中心，问题是div位置点从bootom开始太多，导致顶部和中心区域不会触发悬停动画，只有底部区域触发了悬停动画。如何固定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;
}

更改选择器

.movie_thumb_wrapper .text-content:hover

到

因此，将鼠标悬停在父元素上时会发生转换：

---

非常感谢@Josh Crozier

.movie_thumb_wrapper:hover .text-content

.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);
}