I think your problem probably requires a CSS based solution. Include the following CSS in your style.css file at the bottom to avoid overriding issues.
figcaption.wp-element-caption { display: none; }
figcaption.wp-element-caption:hover { display: block;
background-color: #80808096 !important; /*Adjust Color*/
}
Great! Thank you so much! I will certainly try this. I am not very good, to say the least, with CSS and HTML. Do I copy and paste this into the right hand bottom bit of this particular post or in a more general place?
In your theme file , I believe ,style.css file should be present. Paste these code over there at the bottom. Unless something is overriding the given codes, these should show caption on hover over the image. I hope this helps.
I found it under custom theme and pasted it in, but sadly there must be something overiding it 🙁 As nothing changes on the gallery post 🙁
Try this CSS:
.wp-block-image figcaption { display: none;background-color: #80808096 }
.wp-block-image:hover figcaption { display: block }
Add this in backend under Appearance > Customizer > Additional CSS. And remove the code from above, it does not work.
Thank you! I will remove the previous code and paste this one in its place to see what happens.
I tried but sadly this did not work either. Perhaps there is a conflict somewhere 🙁
You have inserted the code in the wrong place. Namely in the field for CSS classes in the gallery. It can’t work there either.
Please insert the code as I have described here:
Add this in backend under Appearance > Customizer > Additional CSS.
Well, I did actually paste it exactly where you said: Appearance > Customizer > Additional CSS.
And I removed the previous code. When this did not work I also added it to the CSS classes in the gallery. This did not work either, so I removed this. It might be that I have something else in the CSS setting that conflicts? This is what is there already:
colophon{
background-color:#000;}
menu-footer.navbar-nav > li > a {color:#fff;}
.entry-header .page-title, content > .entry-header .entry-title {
font-size: 22px;
}
.wp-block-image figcaption { display: none;background-color: #80808096 }
.wp-block-image:hover figcaption { display: block }
I still do not see any output of the two lines in the frontend. But I can see what else you mentioned, only here in full in the code block:
#colophon{
background-color:#000;}
#menu-footer.navbar-nav > li > a {color:#fff;}
.entry-header .page-title,
#content > .entry-header .entry-title {
font-size: 22px;
}
Below that you would have to add the 2 lines I mentioned. They are missing right now.
#colophon{
background-color:#000;}
#menu-footer.navbar-nav > li > a {color:#fff;}
.entry-header .page-title,
#content > .entry-header .entry-title {
font-size: 22px;
}
<?php echo do_shortcode('[iheu_ultimate_oxi id="5"]'); ?>
.wp-block-image figcaption { display: none;background-color: #80808096 }
.wp-block-image:hover figcaption { display: block }
These are the codes inserted. With the two lines from you. But sadly it has not solved my problem.
Is it still something wrong in the way I have pasted in the code?
Thank you all the same!
Why do you have PHP code in the middle of it? It doesn’t belong there. Delete this line:
<?php echo do_shortcode('[iheu_ultimate_oxi id="5"]'); ?>
The field may only contain CSS code. Presumably this PHP code prevents the CSS code from being executed in full, which could explain all the problems.
YES! That made the difference! Thankyou so much for persevering!
But I was hoping this code would affect all the galleries, also on the other pages and posts. Or does it just do it on this particular post?
Like on this page for instance, that has not got the hover effect.: https://theconferenceofthebirds.net/nests-2/norway/
And I cannot understand why this post has not got it: https://theconferenceofthebirds.net/nests/norway-ahoo-ahoo/docks-down-and-ducks-at-sea/
When this one has: https://theconferenceofthebirds.net/nests/nest2/sensing-birdpoetic-worlds/
-
This reply was modified 1 year, 1 month ago by
evatheweaver.
-
This reply was modified 1 year, 1 month ago by evatheweaver.
Glad it works now 🙂
No, the code applies to every image with a caption. I don’t see any caption on the images on the other page. I think you have to add them there first.
Yes, I am so happy that some of them works now! I really appreciate it. Thank you!
But I cannot understand why it is not working on all of them. I have now checked and tried to add captions on most of the ones from this page and it sadly does not work 🙁 https://theconferenceofthebirds.net/nests-2/norway/
or here: https://theconferenceofthebirds.net/nests/seminars-and-symposium/can-people-and-birds-become-friends/
