Images with links are cutoff during hover with zoom effect

trebla11 · September 2021

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 · September 2021

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

trebla11 · September 2021

Hey Pablo,

Sorry about that.

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

Pablo · September 2021

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

trebla11 · September 2021

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 · September 2021

Hello,

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

Cheers

trebla11 · September 2021

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 · September 2021

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

trebla11 · September 2021

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 · September 2021

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

trebla11 · September 2021

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

Please advise.

Pablo · September 2021

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

trebla11 · September 2021

Thanks! That did the trick. Appreciate your help.

Images with links are cutoff during hover with zoom effect

Comments