Ways to achieve an arched shadow effect for an image using React and Tailwind CSS?

Question

Ways to achieve an arched shadow effect for an image using React and Tailwind CSS?

Looking to add a unique touch to my React project with a shadow effect resembling an arch shape at the top of an image using Tailwind CSS. The ultimate goal is to create a semi-transparent arch-shaped shadow covering the top portion of the image, similar to the example image provided.

https://i.sstatic.net/f5H3tfS6.png

Here's what I've attempted thus far:

.arch-shadow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 100% 100% 0 0;
  z-index: 1;
}

<div ref={viewRef} className="w-full relative flex justify-center">
  <CardImgFrame
    imageUrl={imageUrl}
    alt={title}
    frameClassName="aspect-4/5 h-[516px] relative z-10"
    imageClassName="object-fill"
    priority={true}
  />
  <div className="arch-shadow"></div>
  {description && (
    <p className="absolute text-white bottom-3 font-semibold z-20">
      {title}
    </p>
  )}
</div>

The objective is to have a semi-transparent arch-shaped shadow covering the top part of the image, providing a unique shadow overlay effect with an arch shape at the top.

Current implementation either covers the entire image or fails to achieve the desired arch-shaped effect at the top of the image.

css reactjs next.js tailwind-css

Answer 1

Answer №1

To create a unique visual effect, consider using the arch as the background for the pseudo-element located within a parent container. Utilize radial gradients and clip-path to transform the arch into a semi-circle shape.

Take a look at this straightforward example:

<style>
  * {
    margin: 0;
  }
  
  div {
    width: 100vw;
    height: 100vh;
    background-image: url(https://example.com/image.jpg);
    background-size: cover;
    position: relative;
  }
  
  div::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1;
    opacity: 0.3;
    background-image: radial-gradient(circle at 50% 50%, transparent 0 70%, gray 70% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  }
</style>
<div></div>

Keep in mind that you may need to consider how the design adapts when the viewport changes its aspect ratio, particularly in landscape orientation. Ensure that the semi-circle remains appropriately positioned to showcase the underlying image effectively.

Answer 2

To create a unique visual effect, consider using the arch as the background for the pseudo-element located within a parent container. Utilize radial gradients and clip-path to transform the arch into a semi-circle shape.

Take a look at this straightforward example:

<style>
  * {
    margin: 0;
  }
  
  div {
    width: 100vw;
    height: 100vh;
    background-image: url(https://example.com/image.jpg);
    background-size: cover;
    position: relative;
  }
  
  div::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1;
    opacity: 0.3;
    background-image: radial-gradient(circle at 50% 50%, transparent 0 70%, gray 70% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  }
</style>
<div></div>

Keep in mind that you may need to consider how the design adapts when the viewport changes its aspect ratio, particularly in landscape orientation. Ensure that the semi-circle remains appropriately positioned to showcase the underlying image effectively.

Answer 3

Answer №2

It appears that you are heading in the right direction, but there may be some adjustments needed in the CSS to ensure that the shadow is covering the top of the image accurately. You can try the following code to achieve the desired result.

.arch-shadow {  
  position: absolute;  
  top: 0; /* Positioned at the top */  
  left: 0;  
  right: 0;  
  height: 50%; /* You can modify this height as needed */  
  background: rgba(0, 0, 0, 0.5);  
  border-radius: 50%; /* Creating a circular top arc */  
  transform: translateY(-50%); /* Moving it upwards to overlap the image */  
  z-index: 1; /* Ensure it is above the image but below the title */  
}

To integrate everything into your React component, you can use the following code:

const ImageWithArchShadow = ({ imageUrl, title, description }) => {  
  return (  
    <div className="relative flex justify-center w-full">  
      <CardImgFrame  
        imageUrl={imageUrl}  
        alt={title}  
        frameClassName="aspect-4/5 h-[516px] relative z-10 overflow-visible" // Ensure overflow is visible  
        imageClassName="object-fill"  
        priority={true}  
      />  
      <div className="arch-shadow"></div>  
      {description && (  
        <p className="absolute text-white bottom-3 font-semibold z-20">  
          {title}  
        </p>  
      )}  
    </div>  
  );  
};

Answer 4

It appears that you are heading in the right direction, but there may be some adjustments needed in the CSS to ensure that the shadow is covering the top of the image accurately. You can try the following code to achieve the desired result.

.arch-shadow {  
  position: absolute;  
  top: 0; /* Positioned at the top */  
  left: 0;  
  right: 0;  
  height: 50%; /* You can modify this height as needed */  
  background: rgba(0, 0, 0, 0.5);  
  border-radius: 50%; /* Creating a circular top arc */  
  transform: translateY(-50%); /* Moving it upwards to overlap the image */  
  z-index: 1; /* Ensure it is above the image but below the title */  
}

To integrate everything into your React component, you can use the following code:

const ImageWithArchShadow = ({ imageUrl, title, description }) => {  
  return (  
    <div className="relative flex justify-center w-full">  
      <CardImgFrame  
        imageUrl={imageUrl}  
        alt={title}  
        frameClassName="aspect-4/5 h-[516px] relative z-10 overflow-visible" // Ensure overflow is visible  
        imageClassName="object-fill"  
        priority={true}  
      />  
      <div className="arch-shadow"></div>  
      {description && (  
        <p className="absolute text-white bottom-3 font-semibold z-20">  
          {title}  
        </p>  
      )}  
    </div>  
  );  
};

Ways to achieve an arched shadow effect for an image using React and Tailwind CSS?

Answer №1

Answer №2

Similar questions

Adjustable Greybox Overlay Resizes Window Dimensions

Initiate requests to external servers from a NodeJS backend

Preserve a data point without causing any alterations

Printing Apex Oracle reports using Internet Explorer

Unable to accommodate additional space, InputGroup is not utilizing the

"Seamless integration: Enhancing communication between NextJS application and Express server through internal API

Adding two BR tags between inline images within a wrapper is causing inconsistencies in spacing when viewed in Firefox compared to all other browsers. Check out an example of this issue in

Apollo's useQuery executes just once and doesn't run again when components are re-rendered

Is it possible to use negative values in css?

Tips for creating a mobile-friendly 30-day chart with chart.js

discovered a total of 63 minor vulnerabilities during the npm dependencies installation process

Here's a way to align big text in the center while aligning small text at the bottom

The JSX element 'body' appears to be missing its closing tag

Steps for turning off directory listing on a Next.js site hosted on Vercel

Distinct styling for the start and subsequent lines of an anchor element using ::before pseudo-element

setting a div element to occupy a percentage of the window's height using viewport height units (vh) within the Wordpress platform

The transformation rotation applied in CSS must not have any impact on the styling of my span and paragraph

Modal window closed - back to the top of the page

Solving cross-origin complications with React and Express API

Having trouble with React Page crashing when trying to access the component state