Viewing 15 posts - 1 through 15 (of 15 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

    #1129528

    Hi Mike;
    I tried the first code that you gave me because I indeed wanted the inactive font in semibold (thinner than before).
    Now the only problem is that the hover seems to work on the whole gallery and not on the single photo. If I hover over a photo, all photo captions get the hover effect instead of just the one.

    Thanks again for your excellent support!

    All the best
    Carolin

    #1129801

    Hi,
    Sorry about that it looks like in the top rule I should have had the class “.av-masonry-entry” instead of “.av-masonry” like this:

    #top .av-masonry-entry: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;
    }

    After replacing the css, Please clear your browser cache and check.
    If this doesn’t correct, please remove this css so I can try again, it’s a little hard to test when the wrong css is in place.

    Best regards,
    Mike

    #1131263

    Perfect, that solved it! Awesome, you’re the best!
    Thank you so much!

    #1131394

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

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

The topic ‘Masonry gallery – title below image and new image effect’ is closed to new replies.