Scaling gallery images on hover scales images out of the frame

Site URL: https://www.mmelo.ca/work

I want the pictures in my work page to scale up and have the caption with a black overlay to appear on top when hovering over each picture. I have gotten the caption and overlay to work, but when I tried adding the code to scale the photos up, the photos do in fact scale, however it scales out of its frame. As you can see below, I tried adding overflow: hidden to counteract that, but it doesn't seem to do anything.

Any help would be appreciated, thanks!

This is the code I used:

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: flex-end; /* center vertically */
justify-content: left; /* center */
}
.gallery-caption-content {
font-size: 1rem !important; /* caption font size */
color: white; /*caption font color */
padding: 0px 0px 20px 30px;
}

.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-grid-item:hover
{
transform: scale(1.1);
width: 100%;
height: 100%;
overflow:hidden!important;
}
.gallery-grid-item {
overflow:hidden!important;
position: relative;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}

21 hours ago, tuanphan said:

You need to set overflow for parent element. Add this code under

/* Scale grid photo on hover */
.gallery-grid-item-wrapper {
    overflow: hidden;
}
.gallery-grid-item-wrapper img {
    transition: all 0.3s;
}
figure:hover img {
    transform: scale(1.3);
    transition: all 0.3s;
}

 

This works, thank you so much! The problem I am running into now is, all the galleries on other pages as well as single images (I'm assuming due to figure:hover img) are scaling up as well. Any idea on how to fix this?
Thanks!

On 7/26/2021 at 12:04 PM, mykemelo said:

This works, thank you so much! The problem I am running into now is, all the galleries on other pages as well as single images (I'm assuming due to figure:hover img) are scaling up as well. Any idea on how to fix this?
Thanks!

Use new code

/* work page Scale grid photo on hover */
body#collection-60ef387c1eddff5132766a6a {
.gallery-grid-item-wrapper {
    overflow: hidden;
}
.gallery-grid-item-wrapper img {
    transition: all 0.3s;
}
figure:hover img {
    transform: scale(1.3);
    transition: all 0.3s;
}}

7 hours ago, tuanphan said:

Use new code

/* work page Scale grid photo on hover */
body#collection-60ef387c1eddff5132766a6a {
.gallery-grid-item-wrapper {
    overflow: hidden;
}
.gallery-grid-item-wrapper img {
    transition: all 0.3s;
}
figure:hover img {
    transform: scale(1.3);
    transition: all 0.3s;
}}

 

Works perfectly, I can't thank you enough!

On 8/2/2021 at 3:39 AM, tuanphan said:

Do you need help on these?

(Checked July 29)

Site URL – https://www.mmelo.ca/

1. (Mobile – Work) On desktop, the entire image can be seen. On mobile, image is partially cut off.

https://www.mmelo.ca/paraphernalia-title-sequence

2. (Tablet – Homepage) Reduce space?

https://www.mmelo.ca/

3. (Tablet – About) The width of text is too small.

https://www.mmelo.ca/about

Oh I haven't thought about those. If you could that would be great!

On 8/11/2021 at 12:03 AM, mykemelo said:

Oh I haven't thought about those. If you could that would be great!

Q1. Add to Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="60e53801dd6a6842b5cd2d29"] {
    min-height: unset !important;
    height: 35vh;
}
}

If it works, let me know. We will continue checking other problems

Hi,

I'm having a similar problem - I'm having my images scale on hover. Since it's fluid engine I'm using .sqs-block-image to scale, but I don't want the images to overflow. However I can't seem to find the right parent to get overflow: hidden to work. Could you please help? 🙏

Broadlough.ie

I have tried all of these, lifted from inspecting the page code but it appears they aren't the right ones: 

.image-block-outer-wrapper .fluid-image-animation-wrapper .fluid-image-container .sqs-block-image
  {overflow: hidden !important;}

On 10/3/2023 at 5:46 PM, ruthob93 said:

Hi,

 

I'm having a similar problem - I'm having my images scale on hover. Since it's fluid engine I'm using .sqs-block-image to scale, but I don't want the images to overflow. However I can't seem to find the right parent to get overflow: hidden to work. Could you please help? 🙏

Broadlough.ie

I have tried all of these, lifted from inspecting the page code but it appears they aren't the right ones: 

.image-block-outer-wrapper .fluid-image-animation-wrapper .fluid-image-container .sqs-block-image
  {overflow: hidden !important;}

 

Which image are you referring on homepage?

Hi @tuanphan

I removed this effect from the homepage since my last post but I've now put it on another https://www.broadlough.ie/estate

Appreciate your help!

On 10/3/2023 at 5:46 PM, ruthob93 said:

Hi,

 

I'm having a similar problem - I'm having my images scale on hover. Since it's fluid engine I'm using .sqs-block-image to scale, but I don't want the images to overflow. However I can't seem to find the right parent to get overflow: hidden to work. Could you please help? 🙏

Broadlough.ie

I have tried all of these, lifted from inspecting the page code but it appears they aren't the right ones: 

.image-block-outer-wrapper .fluid-image-animation-wrapper .fluid-image-container .sqs-block-image
  {overflow: hidden !important;}

 

You mean you want to run this code on this page? https://www.broadlough.ie/estate

@tuanphan well, yes something similar. This particular bit of code I tried out doesn't work though. I can get the images to scale / zoom on hover,, but I can't get them to stay within the original bounding box / hide the overflow when they scale /zoom.

Any ideas?🙏      

Any ideas anyone? 🙏

I see you disabled scale on hover on this page. Do you still need help?