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
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)
this is what i mean
i thought i made it good sorry
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?
yes
i searched on kevin's yt and all but didint quite find the solution
do you know how to make it ?
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
This should help you get there I think
no it doesent
idk how to properly explain maybe
sorry
this is how i want it
roughly
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
ok thank you
Honestly though I'm just going to use that post 😄 pretty sure the info there will get you what you want.
ok thank you
ill try
to do it
Also there are multiple ways probably if that don't work we can look at others
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
Share your code?
yes please share 😄
.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?
1 sec
yea thats good
kinda what i wanted
but im noob to programing
Not a perfect circle, as it's taking the width of the element, but it's a starting point
yea
do height on it
translate Y
maybe it looks circle after
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
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