Make the gallery thumbnail preview bigger

Good day,

I want to know if there is any way I can increase the preview size in the gallery thumbnail?

At the moment, my website looks like this:

I want it to look like this:

I don't mind editing the code for each picture. If you can give me reference, I can take it from there and edit the rest as I go. 

Thank you,

K

Can you share the page URL you want to do this on?

5 minutes ago, Ziggy said:

Can you share the page URL you want to do this on?

Hi Ziggy, here it is: https://www.ptphotography.com/destination-pictures-copy
Thank you for your time!

Since you're using a gallery section, if you edit the page and click on Edit Section on the gallery section, you can change the width from Inset to Full. Alternatively if you don't want it full width I can provide some CSS to constrain the width to what ever value you want after setting the section to Full.

section[data-section-id="633562f3cb287e010b366892"] .gallery-grid[data-width="full"] {
  max-width:1600px;
}

Thank you Ziggy, I have tried changing the width from Inset to Full - what it does is it makes the width the gallery bigger.  This new information is definitely something I can use in the future 😊

I added the code in my css but it did not change the size of the thumbnails? Sorry for not explaining my needs precisely but what I really want to achieve is to increase the individual size of the thumbnails(as I referenced in the picture above, so that all my thumbnails look uniform no matter what picture I add in the mix.

Thank you!

Sorry for misunderstanding but given that the image thumbnails are all square they do look uniform, if you want to prevent cropping, have you tried the Masonry gallery style?

Grid: Masonry - A grid where images appear in a staggered layout Slideshow: Simple - A simple slideshow that displays one image at a time

Does that help?

9 minutes ago, Ziggy said:

Sorry for misunderstanding but given that the image thumbnails are all square they do look uniform, if you want to prevent cropping, have you tried the Masonry gallery style?

Grid: Masonry - A grid where images appear in a staggered layout Slideshow: Simple - A simple slideshow that displays one image at a time

Does that help?

Thank you for recommending this.

I looked it up but unfortunately, I think it won't work on my gallery.

I want to be able to see a larger (more zoomed in) preview on my last two thumbnails, as if I leave it as it is now, the last two row looks out of place (I hope I am making sense).

If you click/view my gallery on full screen, you can see that first 3 rows are full pictures while the last two rows are collage. If we can make the preview thumbnails bigger, it would solve the preview issue.

Thank you.

What code are you using for the zoom on hover effect?

13 minutes ago, Ziggy said:

What code are you using for the zoom on hover effect?

Here it is..

.gallery-grid-item

img:hover{
transform:Scale(1.1);
transition-duration: 1s;
}

.gallery-grid-item
{overflow:hidden!important }

32 minutes ago, Ptphotography said:

I want to be able to see a larger (more zoomed in) preview on my last two thumbnails, as if I leave it as it is now, the last two row looks out of place (I hope I am making sense).

Does this work?

.gallery-grid-item:nth-child(16) {
  transform:scale(1.3);
  &:hover {
   transform:scale(1.4);
  }
}

42 minutes ago, Ziggy said:

Does this work?

.gallery-grid-item:nth-child(16) {
  transform:scale(1.3);
  &:hover {
   transform:scale(1.4);
  }
}

 

Wow Ziggy! This is exactly what I am looking for. I didn't think it was possible. Thank you for making it work!

Last favour, how do we make sure it is in keeping with the size of the first 3 columns? How do we fix the size so it matches the rest? 

Thank you!

Try this:

.gallery-grid-item:nth-child(16) img {
  transform:scale(1.3);
  &:hover {
   transform:scale(1.4);
  }
}

11 minutes ago, Ptphotography said:

Ziggy you are amazing! Thank you so much for this! You made me so happy 😁

Fantastic, glad I could help! Could you mark the post as the answer in case anyone else might need it in the future? Thanks!

Lovely photos by the way!

6 minutes ago, Ziggy said:

Fantastic, glad I could help! Could you mark the post as the answer in case anyone else might need it in the future? Thanks!

Lovely photos by the way!

Thank you for the compliment Ziggy. Marked it! 🥰