Help with overflow on image scale when hovered over please!

[core365]

Hi, I’m working on a site using Pro and I’m using a plugin to show team members and my client has asked for some kind of effect when hovering over the members photo. I thought of using the scale effect so the image enlarges when hovered over. I’ve managed to get so far with it and I’m now stuck! When you hover over the image, the bottom of it overlaps the social media icons under it and I can’t figure out how to hide the overflow to stop it from happening. I’d be really grateful if you could take a look for me please and let me know what I can do to correct it if possible.

Here’s the CSS I’ve used for it:

div.grid {
    overflow: hidden !important;
}
.grid img.team-picture {
transition: all .25s ease-in-out;
}
.grid img.team-picture:hover {
transform: scale(1.15);
}

I’ll put the URL in a secure note as it’s being built on a temp link.

Thanks!

[prakash_s]

Hello @core365,

Thanks for writing to us.

To add transform scale properly please have a look at this article. For the quick fix, you can use this custom CSS code under X—>Theme Option —>CSS.

.team-list ul.team-member-socials {
position: relative;
z-index: 9;
}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[core365]

Hi @prakash_s,

Thanks for the CSS, however when hovered over, the zoomed in image is still dropping below it’s container and goes too close to the social media icons - I wanted it to zoom in and not go outside the bottom edge (to stay the same height as when it’s static). I’ve looked at the article and can’t find a solution to fix this, so I’m guessing it’s something that can’t be done without a developer!

Thanks for your time and help, it’s much appreciated!

[prakash_s]

Hello @core365,

You can set some margin-top to the social icon to get rid of this issue or in case if you want the image scaling inside the container you can check this article for reference.
http://vizua.net/image-zoom-on-hover-inside-a-div

Hope it helps
Thanks

[core365]

Hi @prakash_s,

Many thanks for the info and link! I followed what it said in the article, but the image on hover still went outside the container - I’m thinking it’s probably something to do with how it’s been set up originally in the plugin, so I’ll just leave it as it is because unless I can get into the files and change them, then it looks like there’s no CSS that will sort it!

Thanks for all your help and time, it’s much appreciated!

[ruenel]

You are most welcome @core365!