[Resolved] Caption below image

[Tony]

Hi Tom
I used this code and the caption is under the image and looks fine.
.wp-caption .wp-caption-text {
background: transparent;
padding: 2px 0;
color: #616149;
text-align: center;
position: relative;
}

I’m not sure what this post above is about though:
“In order for the links to be visible in case we move captions below images your code, Tom, is not enough. I had to add more lines:”

There is then a chunk of different code after this but I’m not sure what it’s trying to achieve or if a conclusion was reached.

QUESTIONS:
1 – how would i put the caption in the image on a post i.e. over-ride the css?
2 – is there a way to have the caption show up only on hover (under the image or over the image)?

[Tom]

If you have links in your captions then that extra CSS will be necessary.

1. I’m not sure what you mean by this?
2. This should do it:

.wp-caption-text {
    display: none;
}

.wp-caption:hover .wp-caption-text {
    display: block;
}

[Tony]

OK I understand and will try the code out tomorrow.
In Q2 I mean how do I over ride the css that puts the caption under the image if, on some post(s), I want the caption inside the image.

[Tom]

Will there be more posts with it below or on top of the images?

[Tony]

I have no idea to be honest.
If the hover works ok then probably on top inside the image would be the standard.
Up to now I haven’t used captions on emeddled images. In my gallery and light box it’s automatic and uses hover.
Hold fire and let me have a play today.

[Tony]

Having experimented I believe that if I use a caption it will mostly be in/on the image and only shown on hover.

If I want to override this (position and/or hover) on a post how would I do it?

[Tom]

You would have to use the page ID and give the caption different styling for those specific pages.

So if you want the caption below only on a specific page, you would do something like:

.page-id-xx .wp-caption .wp-caption-text {
    background: transparent;
    padding: 10px 0;
    position: relative;
    color: #000;
}

xx being the page ID.

[Tony]

That works thank you.
I guess that you need a copy of this code for each individual page or can multiple post id’s be used in the same piece of code?

[Tom]

Multiple page IDs can be used, just separate them with commas:

.selector-1,
.selector-2,
.selector-3 {
    color: white;
}

[Tony]

Thank you

[Lisa]

Hi Tom,

Love your theme. Do you have the time to help? I’ve added

.wp-caption .wp-caption-text {
background: transparent;
padding: 10px 0;
position: relative;
color: #000;
}

to the child theme editor but I’m still getting the text with overlay instead of moving the caption text below the image. I’ve also tried

#attachment_398 > figcaption {
background: transparent;
padding: 10px 0;
position: relative;
color: #000;
}
w/o success.

Can you help with this?

Thank you,

Lisa

[Lisa]

Update:

There was an error in the style sheet which was invalidating this code. Error removed and all is working. Thank you so much for posting these responses. The threads are very helpful.

Best,
Lisa

[Tom]

Glad you fixed it 🙂

• This reply was modified 8 years, 5 months ago by Tom.

[Anand]

I used the text provided by Aaron Redmon on Page 1 of this thread. In Firefox, the caption immediately moved below the image. However, in Chrome and Edge it just stays above the image.

What to do?

Anand

[Tom]

Can you post the link to your site?

[Author]

Posts