javascript - 如何使悬停字幕正常工作？

Question

在 photoset block 中，当我将鼠标悬停在图片上时，它会出现带有“readmore”文本的悬停。我所做的只是用 CMS 标题替换 readmore block 内

这导致悬停无法正常工作，因为 block 和标题分开显示。

该网站是 compassionlens.photo 以查看完整代码，但 CMS 元素未填充在开发工具中。如果您需要查看更多代码，请告诉我。你能帮我弄清楚如何在我将鼠标悬停在照片上时显示标题吗？

{block:Photo}
            <figure>
            {block:PermalinkPage} 
{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="    
{PhotoWidth-HighRes}" height="{PhotoHeight-HighRes}"/>{LinkCloseTag}    
{/block:PermalinkPage} 
{block:IndexPage}{LinkOpenTag} <img src=" . 
{PhotoURL-HighRes}" alt="{PhotoAlt}" width="{PhotoWidth-HighRes}" 
height="{PhotoHeight-HighRes}"/>{LinkCloseTag}
{block:Caption}<figcaption><a href="{Permalink}">{Caption}</a> . 
 </figcaption>{/block:Caption}
                {/block:IndexPage}
                </figure>
            {block:PermalinkPage}
            <div class="post_photo_content_wrapper">
                {block:Caption}
                <div class="post_content">{Caption}</div>
                {/block:Caption}
                <div class="post_actions 
{block:Caption}with_caption{/block:Caption} clearfix">
            {/block:Photo}
  .post.index.photo figure:hover img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}

.post.index.photo figcaption {
position: absolute;
top: 0;
left: 0;
z-index: 3;
text-color:white;
background-color: black;
position: absolute;
top: 15px;
left: 15px;
display: block;
text-align: center;
opacity: 0;
-webkit-transition: opacity ease 0.1s;
-moz-transition: opacity ease 0.1s;
-o-transition: opacity ease 0.1s;
transition: opacity ease 0.1s;
}
.post.permalink.photo figure {
display: block;
z-index: 2;
overflow: hidden;
}
.post.permalink.photo img {
display: block;
margin: 0 auto;
}
.post.index.photo figcaption a {
display: inline-block;
padding: 10px 10px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-transition: opacity ease 0.1s;
-moz-transition: opacity ease 0.1s;
-o-transition: opacity ease 0.1s;
transition: opacity ease 0.1s;
}
.post.index.photo figcaption a:hover, .post.index.photo figure:hover figcaption  {
opacity: .75;
}
 .post.index.photo figure:hover img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}

  .post.index.photo figcaption {
position: absolute;
top: 0;
left: 0;
z-index: 3;
text-color:white;
background-color: black;
position: absolute;
top: 15px;
left: 15px;
display: block;
text-align: center;
opacity: 0;
-webkit-transition: opacity ease 0.1s;
-moz-transition: opacity ease 0.1s;
-o-transition: opacity ease 0.1s;
transition: opacity ease 0.1s;
}
.post.permalink.photo figure {
display: block;
z-index: 2;
overflow: hidden;
}
.post.permalink.photo img {
display: block;
margin: 0 auto;
}
.post.index.photo figcaption a {
display: inline-block;
padding: 10px 10px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-transition: opacity ease 0.1s;
-moz-transition: opacity ease 0.1s;
-o-transition: opacity ease 0.1s;
transition: opacity ease 0.1s;
}
.post.index.photo figcaption a:hover, .post.index.photo figure:hover figcaption  {
opacity: .75;
}

Answer 1

我想我现在明白你想要什么了。我已经让它工作了CSS悬停效果如下图

.image {
  width: 400px;
}

.overlay {
  position: absolute;
  top: 30px;
  left: 40px;
  height: 100px;
  width: 100px;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.image:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

<div class="image">
<img src="https://smalltotall.info/wp-content/uploads/2017/04/google-favicon-vector-400x400.png" alt="google">
<div class="overlay">
  <p class="text">This is a text</p>
</div>
</div>