New Landing › How can we help? › Cardinal › floating title on images?

Viewing 11 posts - 1 through 11 (of 11 total)
  • Back to forum
    Posted in: Cardinal
  • January 29, 2015 at 7:40 am #145312
    lbdesign
    Member
    Post count: 136

    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.

    January 29, 2015 at 8:52 am #145346
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Hi

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

    – Kyle

    January 29, 2015 at 9:01 am #145349
    lbdesign
    Member
    Post count: 136

    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.
    January 29, 2015 at 9:02 am #145352
    lbdesign
    Member
    Post count: 136

    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.

    January 29, 2015 at 9:07 am #145355
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Please set the caption position to hover

    – Kyle

    January 29, 2015 at 9:09 am #145356
    lbdesign
    Member
    Post count: 136

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

    January 29, 2015 at 9:14 am #145357
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    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

    January 29, 2015 at 9:22 am #145358
    lbdesign
    Member
    Post count: 136

    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)?

    January 29, 2015 at 9:28 am #145360
    Kyle – SUPPORT
    Moderator
    Post count: 35880
    figcaption .thumb-info h4 {
  font-size: 40px;
}

    – Kyle

    January 29, 2015 at 9:32 am #145361
    lbdesign
    Member
    Post count: 136

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

    This is great, thanks for all your help.

    January 29, 2015 at 9:36 am #145363
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    No problem 🙂

  • Back to forum
    Posted in: Cardinal
Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register