Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1124203

    Hi,
    my customer would like to have a photo gallery with

    1) the titles not display on top of the image but in a line below the image, with each title centered below the image.
    2) a different image effect than the ones provided: an overlay of a specific colour (with transparency)

    Is that possible?

    Thanks
    Carolin

    #1124505

    Hey Carolin,

    https://cl.ly/b05a79fadf23 Well, you can show cations all the time, not in hover and center the captions, please try it in the settings.

    Best regards,
    Victoria

    #1124700

    Hi Victoria,
    I’ve tried all possible settings but as you can see, if you checke the website now with the title always shown, it is still not below the image but on top, and covers part of the image.
    I would like to have a line below the image, on the normal blue background.

    How about the second question about a custom color overlay?

    Thanks
    Carolin

    #1124776

    I simulated what I want to achieve with one 4 columns row of single images with the caption underneath, to explain what I am looking for within the gallery.

    I need the gallery to have less space between the images and columns but what’s more, to have the lightbox feature to browse through all the photos.

    Thanks!

    #1124865

    Hi bm_cw,

    Could you please attach a mockup of what you’re trying to achieve?

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    #1125029

    Hi Victoria,

    I am trying to achieve what you see on top of the masonry gallery.
    As I tried to explain, I simulated the effect that I want with single elements that I obviously cannot use because I am missing the gallery features like lightbox, etc.
    If you go on the website (private content), you see the line above the gallery.

    Thanks
    Carolin

    #1126669

    Hi,
    Sorry for the late reply, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top .av-masonry figcaption.av-inner-masonry-content.site-background {
        background: #cde5e6 !important; 
    }
    #top .av-masonry figcaption.av-inner-masonry-content.site-background .avia-arrow {
        display: none !important; 
    }
    #top .av-masonry-entry .av-masonry-entry-title {
        text-align: center;
    }
    #top .av-fixed-size .av-masonry-entry .av-inner-masonry-content {
    	bottom: -4px !important;
    	padding: 3px 0 0 0 !important;
    }
    #top .av-large-gap.av-fixed-size .av-masonry-entry .av-inner-masonry {
        right: 20px !important; 
        bottom: 3px !important; 
    }
    #top .av-hover-overlay-grayscale .av-masonry-entry .av-masonry-image-container {
        -webkit-filter: none !important; 
        filter: none !important;
        background-size: contain !important; 
        background-repeat: no-repeat !important; 
    }
    
    #top .av-masonry-entry:hover .av-masonry-image-container {
        -webkit-transform: none !important; 
        transform: none !important; 
        opacity: .5;
    	background-color: #cde5e6;
    }

    Then clear your browser cache and check.
    Please see the screenshot in Private Content area.

    Best regards,
    Mike

    #1127516

    Awesome, Mike, that is really great!
    Is it also possible to add a hover effect to the caption below the image?
    (font-family: Gilroy-Bold)?

    Thanks a lot!
    Best, Carolin

    #1127530

    Hi,
    Glad to hear this helped. What would you like the hover effect to be?

    Best regards,
    Mike

    #1127562

    Hi Mike,

    it should be
    font-family: Gilroy-Semibold;
    font-size: 16pt;
    when inactive

    and
    font-family: Gilroy-Bold;
    font-size: 16pt;
    on hover

    Thanks again

    #1127783

    Hi,
    Thank you for the feedback, when I check your site I see the caption font is already Gilroy-Bold when inactive, so this css changes the inactive font and adds the hover font:

    #top .av-masonry:hover figcaption h3.av-masonry-entry-title {
        font-family: Gilroy-Bold !important; 
    font-size: 16pt !important; 
    }
    #top .av-masonry figcaption h3.av-masonry-entry-title {
        font-family: Gilroy-Semibold !important; 
    font-size: 16pt !important;
    }

    But this makes the inactive font thinner, if you just wanted the font to be heavier on hover then try this css instead:

    #top .av-masonry:hover figcaption h3.av-masonry-entry-title {
        font-weight: bolder !important; 
    font-size: 16pt !important;
    }
    

    Best regards,
    Mike

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.