辅助悬停过渡不起作用

Question

TEMPLATE

我正在尝试修改此模板以允许它，而不是在一张 400x400 图像上进行白色 X 过渡，而是将其分成四张由线条分隔的不同图像，然后在变平时用 X 适当地过渡，然后在悬停时调出文本字段。我已经这样做了，理论上解决了多图和过渡效果：

.topImage {
width: 400px;
height: 200px;
background-color: blue;
}
.botImage {
width: 400px;
height: 200px;
background-color: red;
}
.leftImageContainer {
position: absolute;
width: 400px;
height: 400px;
border: 0px solid black;
top: 0;
left: -200px;
overflow: hidden;
}
.leftImage {
width: 400px;
height: 400px;
background-color: green;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari */
transform: rotate(45deg);
position: absolute;
top: 0;
left: -83px;
}
.rightImageContainer {
position: absolute;
border: 0px solid black;
width: 400px;
height: 400px;
top: 0;
right: -200px;
overflow: hidden;
}
.rightImage {
width: 400px;
height: 400px;
background-color: purple;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari */
transform: rotate(45deg);
position: absolute;
top: 0;
right: -83px;
}
#xdiv:hover .leftImageContainer {
height: 0;
top: 200px;
transition: all 0.5s;
}
#xdiv:hover .leftImage {
top: -200px;
transition: all 0.5s;
}
#xdiv:hover .rightImageContainer {
height: 0;
top: 200px;
transition: all 0.5s;
}
#xdiv:hover .rightImage {
top: -200px;
transition: all 0.5s;
}

DEMO

但出于某种原因，我无法让与 wrap1 和 wrap2 一起出现的悬停过渡出现。我不确定这是否是最好的方法，但我不确定为什么悬停效果没有显示，因为它的 z-index 应该将它放在悬停的顶部，就像在原来的。

Answer 1

.wrap1 被隐藏了，因为它在 400x400 "X" 图片的下方（而不是后面），所以我将它向上移动了 400 像素。

.wrap1 {
    width: 400px;
    z-index: 99;
    overflow: hidden;
    position: relative;

    top: -400px; /*Move .wrap1 up into view*/

    height: 0px;
    margin: 0px;
    margin-top: 200px;
    background-color: #FFF;
    transition: height 1s 0.5s, margin-top 1s 0.5s;
    background-color: rgba(255, 255, 255, 0.3);
}

辅助悬停过渡不起作用

Secondary hover transition not working

html

css

hover