Offtopic, but does somebody know why the hover transition time is not working for my collection items here?
https://wowdesign-new.webflow.io/portfolio
I tried it with border-radius and with clip-path and also with transition: all .3s ease; nothing seems to work.
looks like it was an issue with your syntax for the clip-path of the circle. But also, in order for CSS to animate something, it has to know the starting point. So in this case we were missing the 1st keyframe - so it didn't know what to transition. Try this code out.
.portfolio-archive-linkblock .portfolio-archive-img {
clip-path: circle(100%);
transition: clip-path ease-in-out 250ms;
}
.portfolio-archive-linkblock:hover .portfolio-archive-img {
clip-path: circle(50%);
}Thanks will try. Clip path was just my second approach after Border-Radius did not work.
I have normal state 40px border radius and changed it to 9999px on hover but the transition time never worked. It always transitioned instantly
yeah, border-radius and clip-path are two different CSS properties. You have to animate the same CSS properties together.
So the border-radius way, you would still have to do with custom CSS because Webflow doesn't let you target hover's in a cascading way.
.parent-link .child-image {
border-radius: 40px;
transition: border-radius ease-in-out 250ms;
}
.parent-link:hover .child-image {
border-radius: 100% /* circle */
}This is just some quick CSS I wrote here as an example way of doing it with border radius.and yeah, when I first dug into it, I already knew I was going to need some custom CSS, but was surprised to see there already was some custom CSS. No native Webflow way of targetting children unless you want to use interactions. And for some of these simple transitions, its a bit overkill to include interactions into them.
I tried interactions but border-radius is not possible with native interactions and as you said, there is no way to do it in a cascading way, so I tried this. But I have to give the image the border-radius and the transition in the same custom css way to make the transition work?
.parent-link .child-image {
border-radius: 40px; /* define the starting point, in this case 40px rounded corners */
transition: border-radius ease-in-out 250ms;
}
.parent-link:hover .child-image {
border-radius: 100% /* transition on hover to a circle */
}Works now with border-radius. Didnt know I have to target the child-img as a child of the parent for the normal state to then be able and control the hover state transition time.. Thanks!
Is there a Relume component or ui element to change the cursor on hover to a circle with text or icon? Or is there a good tutorial on how to make it on my own?
we don't have any UI elements for that no. This is likely your best bet. https://youtu.be/yNZEsBu8VMs?si=oXDANijAD6ZTWVlT
Guess this tutorial will do it. But maybe it would be a nice request to have some collection lists with that interaction built in?
https://www.youtube.com/watch?v=cMGVO8ryvyo
yeah one of the guiding principles we have is to be a solid foundation, and not overly complex with opinions or design direction.
Totally understand where you are coming from though, appreciate your feedback - will keep that in mind if we ever evolve this principle in the future for sure.
I just replaced the big background webp (over 1mb) with an svg and now the site seems to be super laggy when hovering stuff. Is that really an issue, that the site is then too busy rendering the svg?
https://wowdesign-new.webflow.io/referenzen
yeah probably. You should be able to break that image up into smaller chunks than what you have now. I would also challenge that you could likely make the same effect using just the styles panel.
don't get me wrong, it won't be easy to replicate thats for sure, but might be possible.
I see, that might be for sure the best way to do it with gradients and radial gradients?
I might just go with the webp approach for now as I need this thing to get launched soon 😄 But nice to know how to improve it.
naw effects > blur is what I was thinking but yeah webp - or even breaking up the gradients individually might help overall.
Can you add multiple radial gradients into one section? Maybe by having multiple divs sitting inside a section before padding-global and position them absolute with height 100% and then position the radial gradiant 1by1? Or is this a bad thought process? 😄
man, its the wild wild web, you can pretty much do whatever you want. I'm sure there are tricks, and personally, I use empty divs for things like this all the time. I'm sure there are javascript ways of doing things these days but I try to just keep it simple with CSS.
Thanks for the advice, I started replacing all bg images with divs and the positio absolute approach and it works great, but I duplicated a lot of classes now and somehow it does not work anymore. When I click on a class > duplicate > nothing happens anymore... This is kind of annoying. You had a similar problem?
I try to duplicate the "footer-radial-gradient1" class. You can find the div as follows: page-wrapper > main-wrapper > section_footer-home
odd yeah, Andy those are usually your universal signs to shut it down, take a break, restart webflow, maybe even your computer, and come back 😄 😄 😄
I think you are right. It feels like it is exhausted of the empty divs with radial gradients 😄