floating title on images?

[lbdesign]

In Cardinal, I understand that right now, an image with a link can either have a responsive caption mouseover effect, where the color overlays the image, with an icon and a caption, or else you can have the caption appear below the image.

What I am hoping to try is to have the caption always floating over the image, like it does in the responsive mouseover state, but ALWAYS there, regardless of the mouse location. The centered floating position would become the default, always-on position. I’d also like to suppress the color overlay, so you just see the caption floating over the image instead of under it.

Is there a way to hack the code to do this?

Thank you.

[Kyle – SUPPORT]

Hi

Sure, please can you provide your link so I can provide you with some custom css

– Kyle

[lbdesign]

Sure!

I realized there are two different types of image where I’d like to do this:

1) on the home page, I am showing some different images with words on them. Attaching a screen shot of an image where I’d like the caption to always float over the image:
http://breadandcie.com/lee1/

(I’d want to do it for all the images of this type on the page, but if you want me to target them with a special class, I can do that)

2) on a gallery page, I’d like to achieve the same thing on all gallery grid items — always floating text, no overlay color. I’m also attaching a screen shot of this page to indicate an example image.
http://breadandcie.com/lee1/wholesale/wholesale-bread-menu-page/

In both cases, the type would need to be larger, to be legible.

You are great, thank you!

Attachments:

You must be logged in to view attached files.

[lbdesign]

PS: on the home page, I’d edit the images you see now to remove the type I added in Photoshop, so don’t worry about the words you see now. I’d make them plain images so that the CSS type will be the only type there.

[Kyle – SUPPORT]

Please set the caption position to hover

– Kyle

[lbdesign]

Sorry! I just set the first row of 3 images to Hover on the home page.

[Kyle – SUPPORT]

Add this to your custom css:

figure.animated-overlay figcaption {
  opacity: 1;
  transform: none;
}

To remove the bg color, go to Theme Options and set the hover overlay opacity to 0

– Kyle

[lbdesign]

This is fantastic! Thank you.

I’m having trouble targeting these captions to make the font size larger. Can you tell me what CSS selector to use, and what units to use? (px, em, etc)?

[Kyle – SUPPORT]

figcaption .thumb-info h4 {
  font-size: 40px;
}

– Kyle

[lbdesign]

Fantastic again! Thank you. I’m terrible at CSS selectors…

This is great, thanks for all your help.

[Kyle – SUPPORT]

No problem 🙂