jquery - div 中的文本故障排除(没有新技术，只是故障排除)

Question

我正在尝试解决网页上突然出现的问题。 If you take a look at this livelink你会看到在我的网格布局中，第 1 步、第 2 步、第 3 步和第 4 步 div 被动画化以使用 css3 动画旋转。但是，在添加其他 css 并出于某种原因进行更改时，动画搞砸了。 div 应该旋转，然后文本缓和。然而，当 div 旋转时，它们的文本显示在 div 后面。它还显示了上面 div 中的文本!我不知道这里发生了什么，但我真的需要一些人的帮助，因为我无法理解它! The problem does not exist on this identical webpage but I can not see why

相关 div 的 HTML

<div class="col">
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img4"><img src="STEP1.jpg" width="200"/><p>Fill out our order form choosing the service you require and your payment details. We will then take a deposit and book you into our diary.<p></div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img5"><img src="STEP3.jpg" width="200"/><p>We will produce the work you require using the project plan. All of our work is produced Within the time limit set and to the highest possible standard.<p></div>
        </div>
    </div>
    <div class="col">
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img6"><img src="STEP2.jpg" width="200"/><p>We will have a face to face meeting to discuss everything that you require and we will put together a project plan.<p></div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img7"><img src="STEP4.jpg" width="200"/><p>A design is not finished until you are entirely happy. When we believe the work is complete we will send you an artwork approval form for you to sign and return.<p></div>
        </div>
    </div>
</div>

相关 div 的 CSS

.hover-img, .hover-img.hover_effect {
position: relative;
width: 200px;
height: 200px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-transform-style: preserve-3d;
text-align: center;
font-size: 0;
-webkit-user-select: none;
-webkit-touch-callout: none;
border-style: solid;
border-width: 1px;
border-color: #CCCCB2;
border-radius: 5px;
}

.trigger:hover > .hover-img {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
font-size: 14px;
color: #FFF;
}
.trigger:hover > .hover-img.img4 {
background-color: #f47878;
}
.trigger:hover > .hover-img.img5 {
background-color: #f6c447;
}
.trigger:hover > .hover-img.img6 {
background-color: #92cf96;
}
.trigger:hover > .hover-img.img7 {
background-color: #f47878;
}
.trigger:hover > .hover-img.img12 {
background-color: #92cf96;
}
.trigger:hover .hover-img img {
display: none;
}

然而，为了更清楚地了解我的问题，请查看实时链接并查看步骤 div 中的错误并查看我的源代码。我将删除有关帖子 future 后代问题答案的实时链接。

Answer 1

要阻止文本向下移动，绝对定位图像:

.hover-img img {
  position: absolute;
  top: 0;
  left: 0;
}

要将淡入效果添加回文本，请确保将其字体大小设置为 0，就像在其他站点上一样...因此从第 30 行的 grapiciframe.html 中删除以下内容:

* {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

您可能需要考虑使用不透明度来制作动画。