Zooming inside gallery thumbnail without increasing tile size

aaphoto

Hi all,

I'm trying the following: When hovering on a gallery thumbnail, zooming the photo inside the tile, not increasing the size of the thumbnail, as done in Tom's tutorial (https://dgrin.com/discussion/comment/2077347).

To be clear, the effect would be the same as here:

https://www.juanpablodemiguel.com/Galleries

Any ideas, please? :)

Thanks!

Hikin' Mike

@tomnovy needs to update his tutorials.

This is the tutorial: https://portal.photom.me/customization/creating-a-cool-thumbnail-zoom-hover-effect/

aaphoto

> @"Hikin' Mike" said:
> @tomnovy needs to update his tutorials.
>
> This is the tutorial: https://portal.photom.me/customization/creating-a-cool-thumbnail-zoom-hover-effect/

Hi Mike,

Thanks, I already visited his page. But that's not effect I was refering to, as the size of the thumbnail becomes increased. I solved it using the following snippet:

.sm-tile{border-radius:5px;overflow:hidden}

So basically the zoom when hovering happens, but the thumbnail size remains the same

Hikin' Mike

Guess I don't understand your question. The link you posted, https://www.juanpablodemiguel.com/Galleries, uses the same code as @tomnovy tutorial. If there is a problem with your site, we need to see it.

tomnovy

Mike,

My tutorial does not have the overflow: hidden part - which makes the thumbnail larger. By adding overflow: hidden - the zoom effect happens within the thumbnail frame - without increasing the thumbnail size. Two similar effects but different. :}

@Hikin' Mike why do you want me to update my tutorial?

Hikin' Mike

@tomnovy said:
@Hikin' Mike why do you want me to update my tutorial?

Your link goes to a not found: https://dgrin.com/discussion/comment/2077347

Hikin' Mike

@tomnovy said:
Mike,

My tutorial does not have the overflow: hidden part - which makes the thumbnail larger. By adding overflow: hidden - the zoom effect happens within the thumbnail frame - without increasing the thumbnail size. Two similar effects but different. :}

I didn't try it and wasn't sure what he was talking about anyway.

camner

@aaphoto said:

Hi Mike,

Thanks, I already visited his page. But that's not effect I was refering to, as the size of the thumbnail becomes increased. I solved it using the following snippet:

.sm-tile{border-radius:5px;overflow:hidden}

So basically the zoom when hovering happens, but the thumbnail size remains the same

This is neat! BUT, when I tried it, the thumbnail size did NOT remain the same in all directions; it expanded downward, but did not expand left, right, or up. I'm not sure why. I'm guessing that it has to do with the size of the container, that the zoom is not filling the container in the down direction.

Notice how the image on the extends downward in comparison to the image on the left; I'm hovering over the image on the right.

camner

So, I've been digging into this further, and I have a clue, but the answer eludes me.

The code @aaphoto provided includes a slight corner radius, but I notice that this radius doesn't appear on the bottom left and right corners, but only on the upper corners. You can see this more clearly in the screenshot below, where I increased the border radius to 50px.

So, the question is: Why? Why doesn't addressing .sm-tile add the border radius to all 4 corners?

It seems to have something to do with the Gallery Styles setting related to where the info shows. If the info is set to show "Under," then the bottom corners will not have a radius and the bottom overflow won't be hidden, but if the info is set to show with a "bottom bar," then the bottom corners DO have a radius. But I don't understand why this is happening.

If anyone wants to have a look, here's a link to a gallery: https://camner.smugmug.com/Temp-gallery/

Hikin' Mike

@camner said:
It seems to have something to do with the Gallery Styles setting related to where the info shows. If the info is set to show "Under," then the bottom corners will not have a radius and the bottom overflow won't be hidden, but if the info is set to show with a "bottom bar," then the bottom corners DO have a radius. But I don't understand why this is happening.

Remove your code and use this instead:

/*
* Zoom Effect on Thumbnails
****************************************/
.sm-user-ui .sm-tiles .sm-tile-content {border-radius: 5px;}

.sm-user-ui .sm-tile-content .sm-image {transition: transform .5s ease;} 

  .sm-user-ui .sm-tile-content .sm-image:hover {transform: scale(1.05);}

camner

@Hikin' Mike said:

Remove your code and use this instead:

/*
* Zoom Effect on Thumbnails
****************************************/
.sm-user-ui .sm-tiles .sm-tile-content {border-radius: 5px;}

.sm-user-ui .sm-tile-content .sm-image {transition: transform .5s ease;} 

  .sm-user-ui .sm-tile-content .sm-image:hover {transform: scale(1.05);}

That works perfectly at the gallery level, both with the info showing in a bottom bar as well as beneath the image. Thanks much!

BUT, this CSS makes for a funky effect at the containing folder level (the gallery thumbnail slides either half to the right or half way down. Weird!

Take a look at https://camner.smugmug.com/Folder-1 and hover over the gallery thumbnail and you'll see what I mean.

Hikin' Mike

.

camner

@Hikin' Mike said:
.

Sorry, but I'm missing something here...

camner

It's applying the scaling to .sm-image that seems to cause the issue. Funny that it only seems to cause the problem on the folder thumbs, not the gallery thumbs.

Hikin' Mike

@camner said:

@Hikin' Mike said:
.

Sorry, but I'm missing something here...

You removed the temp gallery link, so I originally said I can't help w/o the link, but I found a way around, so I deleted the comment.

Hikin' Mike

@camner said:
It's applying the scaling to .sm-image that seems to cause the issue. Funny that it only seems to cause the problem on the folder thumbs, not the gallery thumbs.

Because folders and gallery thumbnails are different, that's why it's a challenge. This is as good as I can do. The only "issue" is the folder thumbnail hovers.

.sm-user-ui .sm-tile {overflow: hidden;}

.sm-user-ui .sm-tile .sm-tile-content {border-radius: 5px;}

.sm-user-ui .sm-tile-album .sm-tile-content,
.sm-user-ui .sm-tile-folder .sm-tile-content,
.sm-user-ui .sm-gallery-images .sm-tile-content .sm-image {transition: transform .5s ease;} 

  .sm-user-ui .sm-tile-album .sm-tile-content:hover,
  .sm-user-ui .sm-tile-folder .sm-tile-content:hover,
  .sm-user-ui .sm-gallery-images .sm-tile-content .sm-image:hover {transform: scale(1.05);} 

camner

Thanks again for your work.

This works remarkably well! On the folder thumbnail hovers, I see that the zoom enlarges the thumb downwards, but the effect the quite subtle and I'm fine with that. In the galleries themselves, everything looks perfect.

As for removing the link, in order to show the funky effect, I had to create a folder structure above the gallery, and I stupidly forgot to give the updated link. Sorry.

Hikin' Mike

No problem I spent some more time on my testing folder. I'm 99% sure this is as good as it's going to get, at least in my current pay-grade (skills)...lol!.

@camner said:
As for removing the link, in order to show the funky effect, I had to create a folder structure above the gallery, and I stupidly forgot to give the updated link. Sorry.

Figured that's what happened.