I am facing a problem with the columns of the website

So, I created this website and added a div section and in that div, I added three columns and in those columns, I added head text, para, an overlay. I also added some interaction, it’s like when someone hovers over it the para, head text and that overlay disappears and the picture zooms in.

Now, all looks fine when you see it first but when you go to the third column and hover over it, it zooms but then it creates some extra space on the right. I don’t know why. I mean I want to make the column container fixed so that even if the picture zooms it should remain inside that column container.

Any help would be great.

Thank you in advance.


Here is my site Read-Only: https://preview.webflow.com/preview/sagars-marvelous-project-e107ae?utm_medium=preview_link&utm_source=designer&utm_content=sagars-marvelous-project-e107ae&preview=5b2f722f268f9a5f9dcbbf57616538e5&mode=preview

You solved it, right?

I couldn’t. Do you know how to?

Ok.
The issue is, you “scale” the “column” 6,7,8. Don’t do that, because it causes the white space on the right.
-Set all columns to “overflow” “hidden”. Then they work as a mask.

  • put the stuff you want to scale in a div
  • add a “hover” to this div

Best,
Matthias

1 Like

Hey Matthias,

Thank you for the reply.

I tried what you said. So, I changed the overflow of “column 8” to hidden. Then I put the heading, the para text and the overlay in one div (div block 12) and in the other div (div block 9) I inserted an image that I want to scale.

So, basically there are two divs in column 8 now. But now when I hover over the image, it isn’t scaling.

(Btw, I made these changes only with the last column i.e. column 8)

I don’t know what I did wrong.

Thank you in advance for giving it your time.

Regards,
Sagar

Link for the website
https://preview.webflow.com/preview/sagars-marvelous-project-e107ae?utm_medium=preview_link&utm_source=designer&utm_content=sagars-marvelous-project-e107ae&preview=5b2f722f268f9a5f9dcbbf57616538e5&mode=preview

Hi Sagar,

Ok. I looked into your project.

  • go to “column 8” and select your “Div Block 12”
  • grab your “heading” and your “paragraph” and take them out of “Div Block 12”
  • delete “Div Block 12”
  • select “Div Block 9”, set “position” to “absolute” and than to “full”
  • select your “heading” and your “paragraph” and align them

Than it works.

Enjoy,
Matthias

Hey Matthias,

So, I did what you said and now the image (div block 9) scales perfectly. Thank you for that.

But there is another problem now.

The problem is, as the (heading 1) and (paragraph 7) are now separate so they don’t take the full space. So, basically, when I hover over that section I need to hover over the text to make it work, otherwise, it doesn’t work.

I don’t know if my explanation was proper. I am really sorry about that.

Here is the link to see what exactly I meant.

https://preview.webflow.com/preview/sagars-marvelous-project-e107ae?utm_medium=preview_link&utm_source=designer&utm_content=sagars-marvelous-project-e107ae&preview=5b2f722f268f9a5f9dcbbf57616538e5&mode=preview

Regards,
Sagar

Edit:

So, as I said before it was not working out the heading and paragraph but I did a little tweak and it works fine now.

So, what I did was I kept the “div block 9” to “absolute” and then to “full” as you said and I added the overlay in this div only.

Then I created another div “div block 16” in “div block 9” and added the heading and paragraph to that div i.e. “div block 16” and then added the effect on that div.

Thank you for being so patient with me.

Regards,
Sagar

1 Like