css - 如何在 wordpress 中分离两个包含堆叠在每个上方的图像的 div？

Question

我正在为我的投资组合中的图像创建一个悬停动画，到目前为止，我已经调整了两个图像来测试动画。我知道悬停期间动画的位置仍然需要更改，但问题是，两个图像似乎随机堆叠在彼此之上，我尝试做的任何事情都无法将它们拆开。这是 HTML:

<!--raw-->
<div style="text-align:center;">
<div id = 'day3' src ="http://rowanibbeken.co.uk/wp-content/uploads/2013/10    /IMGP1222.jpg" style="border: 5px solid white; margin-left: 10px; margin-right: 10px;">
<div id = 'overlayday3' style='left: 295px; top: 829px; position:absolute;' src = 'http://rowanibbeken.co.uk/wp-content/uploads/2014/01/Overlay-Image.png'></div>
<div id = 'day4' src ="http://rowanibbeken.co.uk/wp-content/uploads/2013/10/IMGP1243-3-small.jpg" style="border: 5px solid white; margin-left: 10px; margin-right: 10px;">
<div id = 'overlayday4' style='left: 600px; top: 829px; position:absolute;' src =    'http://rowanibbeken.co.uk/wp-content/uploads/2014/01/Overlay-Image.png'></div>
</div>  
<!--/raw-->

这是 CSS:

#day3 {
width: 368px;
height: 245px;
border: 5px solid white;
background-image: url('http://rowanibbeken.co.uk/wp-content/uploads/2013/10/IMGP1222.jpg');
background-repeat: no-repeat;
background-size: contain;
}

#day4 {
width: 368px;
height: 245px;
border: 5px solid white;
background-image: url('http://rowanibbeken.co.uk/wp-content/uploads/2013/10/IMGP1243-3-small.jpg');
background-repeat: no-repeat;
background-size: contain;
}

#overlayday3 {
width: 101px;
height: 245px;
display: none;
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
background-image: url('http://rowanibbeken.co.uk/wp-content/uploads/2014/01/Overlay-Image-very-small.png');
}

#overlayday4 {
width: 101px;
height: 245px;
display: none;
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
background-image: url('http://rowanibbeken.co.uk/wp-content/uploads/2014/01/Overlay-Image-very-small.png');
}

#overlayday3:hover {
width: 101px;
height: 245px;
background-image: url('http://rowanibbeken.co.uk/wp-content/uploads/2014/01/Overlay-Image-on-Hover-very-small.png');
}

#overlayday4:hover {
width: 101px;
height: 245px;
background-image: url('http://rowanibbeken.co.uk/wp-content/uploads/2014/01/Overlay-Image-on-Hover-very-small.png');
}

#day3:hover > #overlayday3 {
display: inline-block;
}

#day4:hover > #overlayday4 {
display: inline-block;
}

这是有问题的页面:http://rowanibbeken.co.uk/?page_id=22

我知道这是很多代码，但我真的很感激任何帮助，因为我尝试过的任何东西似乎都不起作用。多谢!罗文<​​/p>

Answer 1

看来原因是您在 day3 div 中有 day4 div。把它拿出来，看看会发生什么