L_Gal

Site URL: https://www.yespeach.com.au/

Hi, I'm trying to recreate this 

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade

Currently I can sort of get it. However when my fade comes in it fades my text as well. Here is what I have...

figure.gallery-masonry-item {

    position: relative;

}

.gallery-caption {

    position: static;

}

/* title */

.gallery-caption-content {

    position: absolute;

    left: 0;

    top: 0;

    right: 0;

    bottom: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 999;

    padding: 7%;

    transition: opacity ease 200ms !important;

    opacity: 0 !important;

pointer-events: none;

}

.gallery-masonry-item:hover .gallery-caption-content {

    opacity: 1 !important;

}

/* overlay */

.gallery-masonry-item-wrapper a:after {

    background: rgba(0,0,0,0.5); /* overlay color */

    content: "";

    display: block;

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    opacity: 0;

    transition: opacity ease 200ms !important;

}

.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {

    opacity: 9.75;

}

.gallery-masonry-item * {

    color: white;

}

/* remove gap */

figcaption {

    padding: 0 !important;

}

/*text color size in masonry gallery*/

.gallery-caption * {

color: #000000 !important;

font-size: 30px !important;

  text-align: center;

}

/*creates opaque rollover effect for regular image blocks*/

.gallery-masonry-item:hover {

background-color: #525a5c; opacity: 0.3; transition: all .5s ease-in-out;}

Site URL: https://www.yespeach.com.au/

Hi, Could someone help me please? 

I have images on my page with text. The text is 'heading 2'.

Problem 1
When the width of the page is getting close to changing to mobile the text is too big and gets split over two lines. Can I make the site change to mobile sooner so the images don't stay in four columns and get too small? 

Problem 2
In mobile, the image is huge! Can I make the images be in two columns, rather than one? so 2 images over 2 lines. 

Thank you in advance!

All good! I've worked out how to do it without code using a product template:) 

Apologies! Thank you for your help, however I explained it poorly.

I meant, the text to be sit on the image (white circle). Is it possible? 

Or is there a better way to do it? 

Thank you in advance! 

Hi @tuanphan could you please help me to do a mixture of the two things you did above. 

I've used the top code so that my text hovers over the image in my masonry gallery. I'd like it to have a grey overlay when I hover over it as well. 

Do I change the font size to be larger in my style settings or is that code? 

website: https://www.yespeach.com.au/work

Thank you very much! 

Site URL: https://www.yespeach.com.au/

Hi, 

I'd like to move the captions under my gallery to sit directly on top of the image. 

I've added white circle jpegs for the gallery to be the background images.  I would like the text to be coloured and to sit on top of the circles. 

Can the text be larger, but change size with the images? So it doesn't go over two lines with a hyphen when the image gets to small?