Hover over text not working on one page?

Site URL: http://www.goatshrine.com/goatbby

On my website I have one page (a collection page) that is different from all the others, and its proving a bit tricky.

As you can an see on my homepage, I have these gallery grid squares that overlay text when you move your cursor over them: http://www.goatshrine.com/

Here on this page I also have a gallery grid (http://www.goatshrine.com/goatbby) and would like for the same thing to happen, but it wont for some reason. There is nothing in the code blocking the piece of code I inserted to do that effect from that page.

Also, would there be anyway to give those gallery images, and every block on that page - the text box, images etc. - rounded corners?  Thank you very much If it helps, my template is Five. !

 - Alice

#1. Can you add some caption/title? I checked Goatbby page & don't see any title/caption in page source.

#2. Use this CSS

/* Guatbby round */
body#collection-5cb20157f9619adc67e89f94 {
.slide>div a {
    border-radius: 20px !important;
}
.html-block {
    border-radius: 20px;
}}

@tuanphan Thank you so much! I've managed to solve it, you're fantastic
While on the topic of the image blocks, you don't happen to know how I might reduce the space/padding between the images on the left sidebar on the Goatbby homepage, do you?

I've tried

Quote

#block-yui_3_17_2_1_1637455033581_38022{
 
margin-bottom: 0px!important;

But its not happening, thank you!

- Alice

Oh its okay, I managed it, thank you all the same!

On 11/22/2021 at 3:13 AM, Goatshrine said:

Oh its okay, I managed it, thank you all the same!

Okay. If you have any other questions, just reply to this topic