我的图片不会在 :hover 上缩放，因为 div 出现在它前面，我该如何解决这个问题？

Question

我正在尝试使用过渡和变换制作 :hover 缩放图像并向上滑动标题的框。

标题容器向上滑动，图像会缩放，但如果 image-details div 滚动，图像不会缩放，而不是图像。

我该如何解决这个问题？

image-details div 悬停在图像前面时将始终可见；如果 div 设置为 100% 宽度和高度。图像根本无法缩放。

.grid .mosa-grid .grid-image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 565px;
    overflow: hidden;
    transition:all 0.5s ;
   -webkit-transition:all 0.5s ;
   -o-transition:all 0.5s ;
   -moz-transition:all 0.5s
}
.grid .mosa-grid .grid-image:hover {
    -webkit-transform: scale(1.2,1.2);
    -webkit-transition: all 3.2s ease-in-out;
}
.grid .mosa-grid .image-details {
    width: 100%;
    height: 360px;
    position: absolute;
    bottom: -360px;
    opacity: 1;
    color: white;
    background-color: black;
    -webkit-transition: all 0.4s, -webkit-transform 0.4s;
    transition: all 0.4s, transform 0.4s;
}
.grid .mosa-grid .item:hover .image-details {
    bottom: 0;
    -webkit-transition: all 0.4s, -webkit-transform 0.4s;
    transition: all 0.4s, transform 0.4s;
    width:100%;
    height: 330px;
    opacity:1;
}

Answer 1

我认为最简单的做法是确保您的悬停事件仅适用于您的容器。当您有 .grid .mosa-grid .item:hover .image-details.

时，这就是您已经为字幕所做的事情

所以对于你的图像缩放，而不是：

.grid .mosa-grid .grid-image:hover {
    -webkit-transform: scale(1.2,1.2);
    -webkit-transition: all 3.2s ease-in-out;
}

只需这样做：

.grid .mosa-grid .item:hover .grid-image {
    -webkit-transform: scale(1.2, 1.2);
    -webkit-transition: all 3.2s ease-in-out;
}

Updated fiddle.

我的图片不会在 :hover 上缩放，因为 div 出现在它前面，我该如何解决这个问题？

My image will not scale on :hover, as a div appears in front of it, how can I get around this?

css

css-transitions

css-transforms