On hover split a css white dot in two halves diagonally split

Question

So this is the task I am trying to complete, as you can see in the image there is a white dot next to words "Perspective"

beforeAfter

On hover it splits into halve diagonally. It has been implemented on this website: Sequoiacap

my task: {/* TODO: in OG site, this white circle splits diagonally into half and then the right spliced part moves down so it looks like two halves of the circle are still touching each other but like apple sliced diagonally and the top part slides down due to gravity */}

I have to achieve the same in React using Chakra UI @ 2.10.4 (Not the new one!)

Important thing to notice is that Those OG dev's have not used any svg images, atleast none i can find to download

this is what i did as work around:

` <Flex justifyContent={"space-between"}> <Box display="inline-flex" alignItems={"center"}> {/* TODO: in OG site, this white circle splits diagonally into half and then the right splited part moves down so it looks like two halves of the circle are still touching each other but like apple sliced diagonally and the top part slided down due to gravity */}

            {/* <Box
              w="10px"
              h="10px"
              borderRadius="full"
              bg="white"
              mr={2}
              _hover={{
                w: "20px",
                h: "10px",
                borderRadius: "50%",
                bg: "white",
                display: "flex",
                justifyContent: "space-between",
              }}
            /> */}
            <Box
              mr={2}
              position="relative"
              w="20px"
              h="20px"
              borderRadius="full"
              overflow="hidden"
              _hover={{
                "& .circle": { opacity: 0 }, // Fade out the white circle
                "& .split-image": { opacity: 1 }, // Show the split image
              }}
            >
              {/* Default White Circle */}
              <Box
                className="circle"
                w="100%"
                h="100%"
                bg="white"
                position="absolute"
                top="0"
                left="0"
                transition="opacity 0.1s "
              />

              {/* Hidden Split Circle Image */}
              <Image
                src={Split}
                alt="Split Circle"
                className="split-image"
                position="absolute"
                w="100%"
                h="100%"
                top="0"
                left="0"
                opacity="0" // Hidden by default
                transition="opacity 0.1s"
              />
            </Box>

            <Text>PERSPECTIVE</Text>
          </Box>`

It not clean nor elegant, as I am beginner I am curious as how this was achieved and if i want to achieve the same, how can I?

I tried _before:: and _after:: but Its too advance for me so my workaround hack was to replace the white dot with hidden pre-split image on hover

Answer 1

Hope this helps.

/* This is just the container for both circles with 
    relative positioning to keep the circles in place */
.circle-wrapper {
  position: relative;
}

/* This is the bottom half of the circle */
.circle-wrapper .circle-a {
  width: 0;
  height: 0;
  border: 24px orange solid;
  border-top: 24px transparent solid;
  border-right: 24px transparent solid;
  border-radius: 40px;
}

/* This is the top half of the circle */
.circle-wrapper .circle-b {
  width: 0;
  height: 0;
  border: 24px orange solid;
  border-bottom: 24px transparent solid;
  border-left: 24px transparent solid;
  border-radius: 40px;
  position: absolute;
  top: 0;
}

/* The hover effect that moves the top half circle */
.circle-wrapper:hover .circle-b {
  transform: translate(12px, 12px);
}

<div class="circle-wrapper">

  <div class="circle-a"></div>
  <div class="circle-b"></div>

</div> <!-- circle wrapper -->

Result