Question

＆＃13;

.demo-3 {
  margin-top: 25px;
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
  float: left;
  margin-right: 20px
}
.demo-3 figure {
  margin: 0;
  padding: 0;
  position: relative;
  cursor: pointer;
  margin-left: -250px
}
.demo-3 figure img {
  display: block;
  position: relative;
  z-index: 10;
  margin: -150px 0;
}
.demo-3 figure figcaption {
  display: block;
  position: absolute;
  z-index: 5;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}
.demo-3 figure h2 {
  font-family: 'Lato';
  color: #fff;
  font-size: 20px;
  text-align: left
}
.demo-3 figure p {
  display: block;
  font-family: 'Lato';
  font-size: 12px;
  line-height: 18px;
  margin: 0;
  color: #fff;
  text-align: left;
}
.demo-3 figure figcaption {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 29px 44px;
  background-color: rgba(26, 76, 110, 0.5);
  text-align: center;
  backface-visibility: hidden;
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s
}
.demo-3 figure img {
  backface-visibility: hidden;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s
}
.demo-3 figure:hover img,
figure.hover img {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg)
}
.demo-3 figure:hover figcaption,
figure.hover figcaption {
  -webkit-transform: rotateY(0);
  -moz-transform: rotateY(0);
  transform: rotateY(0)
}

＆＃13;

<figure>
  <img src="D:\\ps\Notepad++\preview.jpg" alt="" />
  <figcaption>
    <h2>This is a cool title!</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
  </figcaption>
</figure>
</li>
</ul>

＆＃13;

我在互联网上看到这个图像动画，并认为这对我的想法很完美。问题是图像没有正确放置在框中，所以我在css代码中做了一些更改。现在图像正确对齐后，由于我在margin属性中所做的更改，因此应该在图片背面的文本消失了。如果您需要查看原始图像（http://creativenerds.co.uk/wp-content/uploads/2015/08/wet-ink.jpg），这是图像的网址。任何帮助将受到高度赞赏。谢谢:)）

Css图像动画故障

0 个答案: