How would you approach this effect in css?
https://ora-portfolio.framer.website/
I'm trying to recreate this effect, please help.
16 Replies
:hover or :focus
or pointer functions
might be a starting point
probably using variables
100% = --a + --b
or similar
you can animate grid properties too I think, so you could just have them in a grid with
grid-template-columns: 40% 1fr and then animate to grid-template-columns: 60% 1frI was just putting together a demo using animated grid template columns. That works fine however I am struggleing with getting the images to behave
you can make the images be a fixed background
This is what I have so far (though it might break as I play around with it)
https://codepen.io/cbolson/pen/RNbzKeN
seems to work fine
My first instinct for the images would be to use a background image with a specific attachment point
same
if not, then an image thats aligned to one of the sides, using flex or grid or something
this way the image is not still. It's width is increasing with the with of the hovered element.
the one which you did before where
background-attachment: fixed; , horizontal scroll is fine but in while scrolling vertically.
the image stays where it is, we want it to move while scrolling verticallyIf it is "fixed" it won't scroll.
I suspect that this may need a more complex solution. I will take another look later on if I have a chance.
I am not getting that. In both Firefox and Chrome the image width stays the same.
looks like this to me
OK, I see it now. Of course I only tested narrower viewports, I didn't test shorter viewports 🤦♂️
If you give the containing elements, and the background image a fixed height this won't happen.
I have updated my pen with fixed heights and given the background images a width wider than the container.
You could then adjust the dimensions with media queries as required.
I haven’t looked at the codePen but would aspect ratio work in this case? I love aspect ratio and often don’t need a fixed height when using them.
thanks @Chris
yeah, this is how i did it.
with flex box though.
initial width 100% and on hover 120%.
kept the image at 120% fixed.
Id have to double check but I think it's better whem transitioning to scale to 1.2 on hover instead of increase width to 120% but don't quote me. Either way works , just gotta confirm best practice for performance.