Images with links are cutoff during hover with zoom effect

trebla11

I'm having an issue with linked images getting cutoff on the top and bottom when hovering over them.

I found a css solution that was working, but after running the most current update for BeTheme, suddenly it no longer works.

I added the following in the css section in the Theme Option:

.image_frame .image_wrapper{position:relative;overflow:visible !important;}

I've attached a screenshot of the issue

Screenshot 2021-09-01 103546.jpg

Pablo

Hi,

Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us the link.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

trebla11

Hey Pablo,

Sorry about that.

Here is the link to the staging site: https://bbw.28e.myftpupload.com/

Pablo

Can you add special class or id to the section with these images?

I have to make some CSS tweaks to solve that problem.

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

trebla11

Like I said above, this css...

.image_frame .image_wrapper{position:relative;overflow:visible !important;}

was working before and now it's not after updating to the most current version of the theme.

Phil

Hello,

Did you handle it? I have checked your website and the place you were pointing at, and everything seems to be okay.

Cheers

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

trebla11

No. You need to roll over those in order to see the issue. When you hover over the box it cuts off the top and bottom.

Pablo

Well, to change that, you have to attach a custom ID or Class for this element to solve that with CSS

See screen:

Then, I'll be able to help you with the CSS code.

thnaks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

trebla11

Yes, I understand that and stated above that I did that and it was working previously before I undated the theme.

I used this code: .image_frame .image_wrapper{position:relative;overflow:visible !important;}

Do you recommend I use something different?

Pablo

That code you used is for all of the images (if you insert it in Theme Options -> Custom CSS & JS -> CSS)

I ask you, to attach there some class, like "testing" or something else, so I could catch it with CSS (.testing .image_frame .image_wrapper{ position:relative; etc... })

So please, edit the section with these images, and provide some class, like on screenshot:

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

trebla11

Ok. I did exactly what you did on the screenshot.

Please advise.

Pablo

Please paste that CSS code into Theme Options -> Custom CSS & JS -> CSS

.overflowProblem a{
   transform:scale(.9) !important;
}

It will be a little bit smaller, but it won't be cutoff during hover.

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

trebla11

Thanks! That did the trick. Appreciate your help.