In this page: hidden link I have a view with an image grid. I'd like the image to have a zoom effect on hover, and managed to add it. I have added the zoom effect and created a parent div with overflow:hidden so that the images don't go over the container boundaries.
The problem is that the bottom of the image still goes beyond the limits of its parent div.
I cannot add fixed sizes to the images as this won't work responsively... I have seen that if I change .tb-image .tb-image-caption-fit-to-image display value from table to flex, the image behaves correctly BUT the image caption disappears...
I looked at the front end of your site and it's not obvious what is wrong with your implementation (it looks okay to me, but I may be missing what the problem is).
And I don't know exactly what you've done so far.
Could I invite you to set up something similar on a sandbox site where I can see what you are trying to do (and how), and I can propose a solution?
Here is a link you can use to log in to the site: hidden link
There is a page "Grid of Things" with a View to display Thing posts in a grid. You can modify that as required.
I can't see what it is that you have done to add the hover effect, or how you have set this up more generally.
I created a quick demonstration on Codepen of the CSS that is required for such an effect, which you can see here: hidden link (note, the text is part of the image, so hovering a card expands the image which appears as growing text).
If that doesn't help you with a solution, could I get access to your site to look at what you have done?
Let me mark your next reply as private so that I can get log-in credentials from you—you may want to create a temporary admin user for me to use that you can later delete. And be sure to have a current backup of your site.
