Question

在photoset块中，它带有一个“ readmore”文本，当我将鼠标悬停在图片上时出现了该文本。我所做的就是用CMS标题替换了readmore块中的内容

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

该网站为www.companionlens.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>

Answer 2

我认为您正在寻找的是工具提示。 w3schools有一个很好的网站。这就是他们的样子

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

如果您想了解更多信息，请访问这里

https://www.w3schools.com/css/css_tooltip.asp

编辑：

如果要对图像执行此操作，请查看另一篇文章

Tooltip on image

在这里您将看到需要使用属性“ title”，如下所示

<img src="https://smalltotall.info/wp-content/uploads/2017/04/google-favicon-vector-400x400.png" alt="alternative text" title="this will be displayed as a tooltip"/>

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

2 个答案: