Set the variable on hover instead of the transform directly: ```css .bubble:hover { --scale: 1.062
Set the variable on hover instead of the transform directly:
AOh didn't know we could do that
<And then use this variable (with a default of 1) in your actual transform declaration:
<Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
AThanks
AIs it compatible with all browsers?
<all except internet explorer
<but if you use IE, you got other problems
AAlright it's great then
AWhat do you mean using windows 95 in 2024 is a problem
AIt works just like intended but is there a keeping the .25s transition? It actually just transform at the moment the cursor is hovering
<yeah you can't have animation & transition on the same property at the same time
<Maybe it would be best to split it up into 2 components
<so you have an outer div that gets the scale on hover and the inner div does the floaty bubble stuff
<do you know what I mean? If not I can implement it in the jsfiddle real quick :)
AYes I think I understood
AI'll try tomorrow
<Thats really simple. Use flex.
<Float still has it's use cases, but they're very rare. Mostly it's a relict from the past where flex and grid did not exist.
AOkay so I tried multiple solutions but I did not get quite right the result
AI managed to make it scale up and float but only the text which is not centered anymore
AOr I manage to do it but it's just bugging completely without being at its place
<Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
<the scale needs to be on the outer of the 2 containers to scale up the whole bubble and not only the text
AThank you but I'm still facing a problem
AAlone it's working all great
ABut I had to move my elements using position: absolute;
AAnd as soon as I do that it flickers when I hover them
ACSS is such a pain for nothing
<then it would probably best to apply the absolute position to another container around the anchor
<can you send a minimal example as fiddle (or your whole page if possible) where this effect occurs?
<It's the best we got tbh. UI without CSS is so much more pain.
AOh yes eventually
AI feel like it's always containers in containers in containers
AI'll send it tomorrow as I already turned off my computer and got to bed
AThank you very much for the efforts you're putting in
<HTML & CSS in a nutshell 
<Guten Tag @houpy!
<Something doesn't work? Slap a container around it!
AAaah I hate this
AI may be too traditional for this
<Kk, perfect, I just turned off everything as well xD Good night :)
AI'm still using header, section and footer tags to differentiate what is what instead of using divs with some class name like every does
<I try to avoid it as much as possible as well. And if I wrap things than I try to use semantic elements mostly. But often it's the only way.
<Yup that's what I mean, that always feels much better :D
(And is better for accessibility in some cases)
(And is better for accessibility in some cases)
<Lol that's just my face 