对 div 中的文本进行故障排除（没有新技术，只是一个故障排除）答案

【问题标题】：Troubleshooting Text within divs (no new techniques,just a troubleshoot)对 div 中的文本进行故障排除（没有新技术，只是一个故障排除）
【发布时间】：2015-04-13 10:57:49
【问题描述】：

我正在尝试解决我的网页上突然出现的问题。 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 中的错误并查看我的源代码。我将删除关于问题答案的实时链接，以供该帖子的后代使用。

【问题讨论】：

标签： jquery html css text

【解决方案1】：

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

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

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

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

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

【讨论】：