Question

我正在尝试解决我网页上突然出现的问题。 If you take a look at this livelink您将在我的网格布局中看到步骤1，步骤2，步骤3和＆amp;步骤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;
}

但是为了更清楚地了解我的问题，请查看livelink并查看步骤div中的错误并查看我的源代码。我将删除帖子的未来后代的问题回答的livelink。

Answer 1

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

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

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

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

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

div中的文本疑难解答（没有新技术，只是一个故障排除）

1 个答案: