Question

我一直试图复制一个我在JS Fiddle中找到的效果，但却适合我的网站。 JSFiddle是here。我有5个div都有这个效果，一行3个div，下面是一行2个div，根本没有文字出现。

下面是我的代码，但它似乎没有以相同的方式工作，我必须包括其他div等，以便在我的网站环境中工作。但现在它不会起作用。我的代码如下。

HTML 的

<div id="apDiv7">
  <div style="border-radius: 20px;" class="table-wrapper">
    <div class="row row1">
      <div class="column">
        <div class="hover-img">
          <img src="topright.png" width="400" height="300" class="img1"/>
          <p class="text">text here 1</p>
        </div>
      </div>
      <div class="column">
        <div class="hover-img">
          <img src="topcenter.png" width="400" height="300" />
          <p class="text">text here 2</p>
        </div>
      </div>
      <div class="column">
        <div class="hover-img">
          <img src="topleft.png" width="400" height="300" />
          <p class="text">text here 3</p>
        </div>
      </div>
    </div>
    <div class="row row2">
      <div class="column">
        <div class="hover-img">
          <img src="bottomleft.png" width="600" height="400" />
          <p class="text">text here 4</p>
        </div>
      </div>
      <div class="column">
        <div class="hover-img">
          <p></p>
          <img src="bottomright.png" width="600" height="400" />
          <p class="text">text here 5</p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

#apDiv7 {
    position: absolute;
    width: 90%;
    height: 700px;
    left: 5%;
    background-color: #FFFFFF;
    border-radius: 20px;
    border: 8px solid #666666;
}
.hover-img {
    position: relative;
    height: 300px;
    -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;
    background: url(bbclike/topright.png);
    -webkit-transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
    line-height: 200px;
    text-align: center;
    font-size: 0;
    margin: 0 auto;
}
.hover-img:hover{
    -webkit-transform:rotateY(0deg);
    font-size:14px;
    color:white;
}
.hover-img:hover > .text {
    opacity: 1;
}
.hover-img > .text {
    opacity: 0;
    -webkit-transition: opacity 500ms ease-in-out;
    -moz-transition: opacity 500ms ease-in-out;
    -ms-transition: opacity 500ms ease-in-out;
    -o-transition: opacity 500ms ease-in-out;
    transition: opacity 500ms ease-in-out;
}

我会很高兴有人可以帮助我调整这段代码以使其正常工作。

在我接受答案并关闭问题之前，我将删除此实时演示，这只是为了帮助解决我的特定问题。 http://www.mildenhire.com/bigsmile/graphic.html

Answer 1

<div id="apDiv7">
  <div style="border-radius: 20px;" class="table-wrapper">
    <div class="row row1">
      <div class="column">
        <div class="hover-img img1">
          text here 1
        </div>
      </div>
      <div class="column">
        <div class="hover-img img2">
          text here 2
        </div>
      </div>
      <div class="column">
        <div class="hover-img img3">
          text here 3
        </div>
      </div>
    </div>
    <div class="row row2">
      <div class="column">
        <div class="hover-img img4">
          text here 4
        </div>
      </div>
      <div class="column">
        <div class="hover-img img5">
          text here 5
        </div>
      </div>
    </div>
  </div>
</div>

还在此处指定图片的网址

.img1 {
  background: green;
}

.img2 {
  background: red;
}

.img3 {
  background: blue;
}

.img4 {
  background: #333;
}

.img5 {
  background: #c33;
}

请参阅codepen了解详情

Div动画，从图像到内容的过渡

1 个答案: