Link Overlay

import { Box, LinkOverlay } from 'styled-system/jsx'

function App() {
  return (
    <Box pos="relative">
      <img src="https://via.placeholder.com/150" alt="placeholder" />
      <LinkOverlay href="#">
        View more
      </LinkOverlay>
    </Box>
  )
}

import { LinkOverlay } from "styled-system/jsx";

<LinkOverlay href="https://example.com">
  Click here
</LinkOverlay>

import { Box, LinkOverlay } from 'styled-system/jsx'
function App() {
  return (
    <Box pos="relative">
      <img src="https://via.placeholder.com/150" alt="placeholder" />
      <LinkOverlay href="https://example.com">
        View more
      </LinkOverlay>
    </Box>
  )
}