Okay
  Public Ticket #842044
Captions
Closed

Comments

  • Jamie Edwards started the conversation
    July 26, 2016 at 9:23am

    Hi,

    I am creating a portfolio in the side gallery view and noticed the image caption appears on roll over. I would like to experiment with two options and wondering if you could help?

    Option 1: Instead of on rollover allow the caption box to always be displayed, same position on image but maybe slightly higher opacity. With no change to the mobile view - caption still sitting below image.

    Option 2: Use the mobile view caption placement (below image) for desktop view too.

    Thanks in advance for your help.

    Cheers,

    Jamie


  •  1,558
    Laborator replied
    July 26, 2016 at 11:55am

    Hi Jamie,

    Could you post your site URL, we will check what we can do about it :)

    Best regards,
    Laborator Team

      Documentation         Join Kalium Users Group

  • Jamie Edwards replied
    July 26, 2016 at 12:54pm

    Thanks. Below is the link, the top image contains a rollover caption:

    http://www.milkonesugar.com.au/portfolio/vogue-australia/

  •  1,558
    Laborator replied
    July 27, 2016 at 11:14am

    Hi Jamie,

    Use the following CSS code in your Custom CSS area to get the results as described in option 1:

    .single-portfolio-holder .gallery .photo .caption {
    background-color: rgba(0,0,0,0.7);
}

.single-portfolio-holder .gallery .photo .caption {
    bottom: 0px;
}

    Best regards,
    Laborator Team

      Documentation         Join Kalium Users Group

  • Jamie Edwards replied
    July 27, 2016 at 11:33am

    Thanks Art. The captions still appear on rollover, can this be changed so they are permanently displayed.?

    Also the box is slightly off left aligned, approx 15px 

    http://www.milkonesugar.com.au/portfolio/vogue-australia/

  • Jamie Edwards replied
    July 27, 2016 at 11:37am

    I've just fixed the left alignment issue :)

  •  1,558
    Laborator replied
    July 27, 2016 at 11:38am

    Hi Jamie,

    Remove the code I already gave you and use this one instead:

    .single-portfolio-holder .gallery .photo .caption {
    background-color: rgba(0,0,0,0.7);
    opacity: 1;
    bottom: 10px !important;
    left: 0;
    transition: none;
}

.single-portfolio-holder .gallery .photo:hover .caption {
    bottom: 0px !important;
}

    Best regards,
    Laborator Team

      Documentation         Join Kalium Users Group

  • Jamie Edwards replied
    July 27, 2016 at 1:02pm

    Thanks again :)

    looks pretty good but the caption design looks a little weird on different break points, especially in mobile.  Looking at the design I think my preference would be for the caption to appear at the bottom on all break points - following the current mobile caption layout.

    Could you send across the css for this option please?

    Cheers,

    Jamie

  •  1,558
    Laborator replied
    July 27, 2016 at 1:20pm

    Hi Jamie,

    Use this code then:

    .single-portfolio-holder .gallery .photo .caption {
    background-color: rgba(0,0,0,0.7);
    opacity: 1;
    bottom: 10px !important;
    left: 0;
    transition: none;
    position:relative;
}

.single-portfolio-holder .gallery .photo:hover .caption {
    bottom: 0px !important;
}

    A position: relative was needed to fix it.

    Best regards,
    Laborator Team

      Documentation         Join Kalium Users Group

  • Jamie Edwards replied
    July 30, 2016 at 2:09am

    Thanks Art. Please could you also provide the CSS for displaying the caption permanently below the image for desktop and mobile?  Following the current theme mobile style.

    Cheers,

    Jamie

  •  1,558
    Laborator replied
    August 1, 2016 at 2:18pm

    Hi Jamie,

    Use the following CSS in Custom CSS > Responsive > Extra Small:

    .single-portfolio-holder .gallery .photo .caption {
    bottom: 0px !important;
}

    Best regards,
    Laborator Team

      Documentation         Join Kalium Users Group