Круг изображения при наведении занимают 100% высоты и ширины

Question

Привет, я пытаюсь сделать анимацию при наведении, без наведения. Мне бы хотелось, чтобы мой круг составлял 100% высоты и ширины.

, и по какой-то причине я не могу покинуть свой круг. с радиусом границы 100%

вот так:

код:

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>

пример:

https://codesandbox.io/s/dry-river-09ft0

Answer 1

Попробуйте использовать следующий стиль-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;
  }
`;

Это использует абсолютное позиционирование, чтобы правильно установить, где круг должен go. Чтобы заставить работать абсолютное позиционирование, содержащийся элемент должен иметь положение, отличное от 'stati c'.

Свойство перехода обеспечивает анимацию.