div 中的文本故障排除（没有新技术，只是故障排除）

Question

我正在尝试解决网页上突然出现的问题。 If you take a look at this livelink you will see that within my grid layout the step 1, step 2, step 3, & step 4 divs are animated to spin using css3 animation. However while adding other css and making changes for some reason the animation is messing up. The div is supposed to spin and then the text eases in. However their is text showing behind the div as the div spins. It is also showing the text that is in the div above! I have no idea what has happened here but please I really need somebodies help as I can not get my head around it! The problem does not exist on this identical webpage but I can not see why

HTML 有问题的 div

<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>

CSS 有问题的 div

.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 中的错误并查看我的源代码。为了 postpost.

的未来 posterity，我将删除关于问题回答的实时链接

Answer 1

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

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

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

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

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

div 中的文本故障排除（没有新技术，只是故障排除）

Troubleshooting Text within divs (no new techniques,just a troubleshoot)

html

css

jquery

text