I want to make a parallax porthole as a sort of “line break” transition between content.
I thought of doing it in 3 ways.
First way, make the background of the middle grid element the image I want parallaxed and the other grids a white background, then add a transparent circle png(remove any margin etc so that you don’t see the background anywhere but the porthole). This in theory works but since the other 2 grid columns are a fixed ratio(1/3, 1/6, etc…), depending on the resolution, space appears between the image and the other grid columns.
Second way, I play with the background border radius of the middle column, if I put them all at 100% it recreated the porthole effect, now since there is only a background, the column is simply squished when appearing on the website, if I add padding it doesn’t make a perfect circle because it seems to depend on the resolution and it is stretched vertically.
Third way, same theory as first but I have a png that is a rectangle this time, with a circle in the middle, this solution works on most resolutions including mobile but since it is a rectangle, the mobile circle is extremly small. I want the porthole effect to be big on desktop and big on mobile.
Any ideas on how I can achieve this? Seems like I gotta either find a way to make the column width adaptive to cover the holes or force the empty columns to be a perfect square of a certain size. Thank you
-Victor