HTML过渡图像和一个figcaption

Question

我有一点问题，无法找到解决方案。我相信它很容易放弃，但我无法找到工作方式 我有两张图片，其中一张图片仅在悬停时出现。我需要得到一个Figcaption。目前我在图像div框下方使用了第二个div框，但这不是解决问题的好方法。

  

HTML代码

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

     

  如果我没有过渡，这是有效的：

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