Background Appear on transition

I want the background to appear on a border-only box from the bottom centre as a sphere and then cover up the whole thing. some code : .wrapper{ display:flex; justify-content: space-evenly; text-align: center; flex-direction: row; align-items: center; height:100vh; gap:30px; } .box{ flex:1; padding:3rem; border:2px solid rgb(5, 5, 233); border-radius:10px; transition:all 350ms ease-in-out; } .box:Hover{ background-color:rgb(5, 5, 233); color:#fff; }
26 Replies
13eck
13eck•15mo ago
What do you mean by "a border-only box"? And please use code blocks for code (see #How To Ask Good Questions for the syntax)
zBogdy06
zBogdy06•15mo ago
No description
zBogdy06
zBogdy06•15mo ago
this is what i mean i thought i made it good sorry
13eck
13eck•15mo ago
So you have an element with a border, and you want the hover colour to start at the bottom-middle? And radiate outward as a circle?
zBogdy06
zBogdy06•15mo ago
yes i searched on kevin's yt and all but didint quite find the solution do you know how to make it ?
b1mind
b1mind•15mo ago
Temani Afif
CSS-Tricks
Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D ...
We’ve walked through a series of posts now about interesting approaches to CSS hover effects. We started with a bunch of examples that use CSS background
b1mind
b1mind•15mo ago
This should help you get there I think
zBogdy06
zBogdy06•15mo ago
no it doesent idk how to properly explain maybe sorry
zBogdy06
zBogdy06•15mo ago
No description
zBogdy06
zBogdy06•15mo ago
this is how i want it roughly
b1mind
b1mind•15mo ago
Right and the methods to do that are in the post 😄 background-clip + hover I think you nerd sniped Beck so maybe he will come up with a codepen demo If I have time I might give a shot
zBogdy06
zBogdy06•15mo ago
ok thank you
b1mind
b1mind•15mo ago
Honestly though I'm just going to use that post 😄 pretty sure the info there will get you what you want.
zBogdy06
zBogdy06•15mo ago
ok thank you ill try to do it
b1mind
b1mind•15mo ago
Also there are multiple ways probably if that don't work we can look at others
zBogdy06
zBogdy06•15mo ago
ill try one first i gotta learn what bg clip is idk i dont find the methods either im too dumb or im blind lol i hope Beck comes to save i got it its harder than i thought ty
13eck
13eck•15mo ago
Share your code?
b1mind
b1mind•15mo ago
yes please share 😄
zBogdy06
zBogdy06•15mo ago
.wrapper{ display:flex; justify-content: space-evenly; text-align: center; flex-direction: row; align-items: center; height:100vh; gap:30px; } .box{ flex:1; padding:3rem; border:2px solid rgb(5, 5, 233); border-radius:10px; background: radial-gradient(50% 100% at bottom, #fff 97%, #000), radial-gradient(50% 100% at bottom, #0505e9 97%, #0000), #000; -webkit-background-clip: text,padding-box,text; background-clip: text,padding-box,text; background-size: 0% 0%; background-position: bottom; background-repeat: no-repeat; transition: 1050ms; } .box:Hover{ background-size: 280% 280%; color:#fff; } basically used what was on those codepens changed the transition speed cos i wanted it slower and the color and the bg size on hover bg size was 110% and 60% on hover i made it 280% 280% so it covers the whole box u want me to close this?
zBogdy06
zBogdy06•15mo ago
1 sec yea thats good kinda what i wanted but im noob to programing
13eck
13eck•15mo ago
Not a perfect circle, as it's taking the width of the element, but it's a starting point
zBogdy06
zBogdy06•15mo ago
yea do height on it translate Y maybe it looks circle after
13eck
13eck•15mo ago
The issue is that the CSS is taking the width and height of the parent and doing the calculations off of them separately. We'd need to use JavaScript to get the size of width only and use that
zBogdy06
zBogdy06•15mo ago
aa idk im still learning css and html as im not perfect and java is just another level :)) thats mainly why i joined dc , for issues i can t rlly solve with kevins videos cos most of them i can just learn from videos of him
13eck
13eck•15mo ago
Made a few changes to the CodePen so it doesn't have the weird bottom-corner-no-filling-in-until-last
Want results from more Discord servers?
Add your server