HTML 过渡图像和一个图形说明

Question

我有一个小问题，找不到解决方案。我相信这很容易，但我找不到工作的方法。
我有两张图片，其中一张只能在悬停时看到。我需要给它一个 Figcaption。目前，我在图像 div 框下方使用了第二个 div 框，但这不是解决我的问题的好方法。

HTML code

    <div class="vid-pre-3 vid-marg">
        <a href="http://www.mypage.com/">
            <div id="vid-trans">
                <img class="width-100" src="http://www.mypage.com/preview/image02.png"/>
                <img id="top" class="width-100" src="http://www.mypage.com/preview/image01.png"/>
            </div>
        </a>
    </div>

CSS

.vid-pre-3{
width: 22.75%;
float: left;
height: 175px;
}
.vid-marg{
margin-right: 3%;
}
#vid-trans{ 
position: relative;
}
#vid-trans img#top:hover { 
opacity:0 ;
}
#vid-trans img { 
position: absolute; 
top: 0; left: 0; opacity: 1;    
transition: opacity 1s;
}

This is working, if I don't have a transition:

<div class="vid-pre-3 vid-marg">
    <img class="width-100" src="http://www.mypage.com/preview/image02.png" />
    <figcaption>My Caption Text</figcaption>
</div>

我很高兴有任何解决方案!

Answer 1

不确定我是否完全理解您的问题，但我认为您是在问如何只在悬停时显示图形标题，您可以这样做:

.vid-pre-3{
  width: 22.75%;
  float: left;
  height: 175px;
}
.vid-marg{
  margin-right: 3%;
}
#vid-trans{ 
  position: relative;
}
#vid-trans:hover img#top { 
  opacity:0;
}
#vid-trans img { 
  position: absolute; 
  top: 0; left: 0; opacity: 1;    
  transition: opacity 1s;
}

figcaption {
  position:absolute;
  display:none;
}
  #vid-trans:hover figcaption {
    display:block;
  }

<div class="vid-pre-3 vid-marg">
  <a href="http://www.mypage.com/">
    <div id="vid-trans">
      <img class="width-100" src="http://placehold.it/250x250"/>
      <img id="top" class="width-100" src="http://placehold.it/250x250/fff/000"/>
      <figcaption>My Caption Text</figcaption>
    </div>
  </a>
</div>