How do I make this hover caption work properly?

Question

In the photoset block it had this hover with a "readmore" text that appeared when I hovered over the picture. All I did was replace inside the readmore block with the CMS caption

This has caused the hover to not work right as the block and the caption appear separately.

The website is compassionlens.photo to check out the full code but the CMS elements do not populate in dev tools. Let me know if you need to see more of the code. Can you help me figure out how to make the caption appear when I hover over the photo?

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

Note: I want the caption to appear as it already appears when I do hover over the grey box, not as a tooltip. — MFlower, Apr 18 '19 at 18:02

score 1 · Answer 1 · answered Apr 18 '19 at 18:17

I think i understand what you want now. I have made it work using the CSS hover effect as show below

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

Chris · Answer 2 · 2019-04-18T17:59:19.060

I think what you are looking for is tooltips. w3schools has a good site about them. This is what they look like

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

Here is the site if you want to learn more

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

Edit:

If you want to do this for an image, take a look at this other post

Tooltip on image

Here you will see that you need to use the attribute "title", just as shown below

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

I already have a functioning caption that appears when I hover over the black box. I need it to appear when I hover over the photo. You can see it in action at compassionlens.photo would clarify what I mean like right away. It was hard to make the question clear. — MFlower, Apr 18 '19 at 17:28

How do I make this hover caption work properly?

2 Answers2