Masonry gallery - title below image and new image effect - Support

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

Author

Posts
August 2, 2019 at 4:40 pm #1124203

bm_cw
Participant

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

August 4, 2019 at 12:20 pm #1124505

Victoria
Inactive Moderator

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

August 5, 2019 at 12:40 pm #1124700

bm_cw
Participant

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

August 5, 2019 at 3:50 pm #1124776

bm_cw
Participant

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!

August 5, 2019 at 8:28 pm #1124865

Victoria
Inactive Moderator

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

August 6, 2019 at 9:57 am #1125029

bm_cw
Participant

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

August 11, 2019 at 9:28 pm #1126669
Mike
Moderator
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
August 14, 2019 at 8:53 am #1127516

bm_cw
Participant

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

August 14, 2019 at 9:18 am #1127530

Mike
Moderator

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

Best regards,
Mike

August 14, 2019 at 11:12 am #1127562

bm_cw
Participant

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

August 15, 2019 at 3:51 am #1127783
Mike
Moderator
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
August 21, 2019 at 10:16 am #1129528

bm_cw
Participant

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

August 21, 2019 at 10:54 pm #1129801
Mike
Moderator
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
August 27, 2019 at 9:51 am #1131263

bm_cw
Participant

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

August 27, 2019 at 5:21 pm #1131394

Jordan Shannon
Inactive Moderator

Hi,

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

Best regards,
Jordan Shannon
Author

Posts

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.