Circle image on hover occupy 100% height and width - css

Question

Hi I'm trying to do an animation on hover, without the hover I would like my circle to make 100% of the height and width
and for some reason I am not able to leave my circle with 100% border radius
like this:
code:
export const TeamCard = styled.div`
background: red;
padding: 10px 0;
& .bgCircle {
border-radius: 50%;
padding: 64px;
background: hotpink;
}
`;
export default function App() {
return (
<TeamCard>
<div className="bgCircle" />
<div class="description">
<h3>huhuehu</h3>
<h3>testing</h3>
</div>
</TeamCard>
example:
https://codesandbox.io/s/dry-river-09ft0

Answer 1

Try using the following styled-div:
export const TeamCard = styled.div`
position: relative;
background: red;
height: 300px;
width: 300px;
& .bgCircle {
border-radius: 100%;
height: 50px;
width: 50px;
background: hotpink;
transition: all ease 333ms;
}
&:hover {
.bgCircle {
position: absolute;
top: 0;
height: 300px;
width: 300px;
border-radius: 0;
left: 0;
right: 0;
}
}
& .description {
position: absolute;
bottom: 0;
}
`;
This is making use of absolute positioning to correctly set where the circle should go. In order to make absolute positioning work, the containing element needs to have a position of something other than 'static'.
The transition property is what provides the animation.