How can you gradually fade out the bottom edge of a rendered component until it is re-rendered?

Currently, I am developing a reviews microservice for an e-commerce platform using react and react-bootstrap. My goal is to showcase 5 reviews initially, followed by a button to expand and reveal more reviews. In order to achieve this, I envision the bottom edge of my review components within the reviewList component to be faded until the user clicks on the expand button.

I found a perfect example on Etsy that captures exactly how I want it to look.

Despite experimenting with various CSS techniques and react-bootstrap, I have been unsuccessful in achieving the desired effect. Specifically, I only want the bottom portion of the entire reviewList component to fade out.

Take a look at this example:

In the example provided, you can see that the bottom of the last review fades out.

Ultimately, my expectation is to keep the bottom area faded until the expand button is clicked. However, all my attempts have only resulted in animating or fading each individual review component.

javascriptcssreactjsreact-bootstrap

Answer №1

To give the container component a unique style, consider adding a pseudo-element to the bottom edge with a background that transitions from transparent to semi-transparent to opaque. You can achieve this by creating a pseudo-element for the container and setting its background-image using a linear gradient with rgba colors (the "a" in rgba represents transparency).

Another option is to create a background with the desired effect in Photoshop and use that as the background image.

<div className="review-list-container">
    <ReviewList />
</div>

.review-list-container::after {
  content: '';
  position: absolute;
  display: block;
  width: 300px;
  height: 100px;
  bottom: 50px;
  background-image: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,0,0,1)); /
  /* Alternatively, create the desired gradient effect as a PNG in Photoshop */
}

For an example, check out https://codepen.io/Roughton/pen/dBxmdw

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why does the browser indicate that a GET request has been sent but the promise does not return anything?

Having trouble with a puzzling issue and unable to find any solutions online. I am attempting to make a basic HTTP get request to receive a JSON object from an API I created (using express+CORS). I have experimented with both Axios and VueResource, yet en ...

javascriptvue.jshttppromiseget

Adjust Sidebar Height to Match Document Height (using React Pro Sidebar)

Having an issue with the height of a sidebar component in Next.js using React Pro Sidebar. It seems to be a JavaScript, HTML, and CSS related problem. I've tried several suggested solutions from Stack Overflow, but none of them seem to work. Surprisin ...

javascripthtmlcssreactjsnext.js

The functionality of using variables in conjunction with the .insertAfter method appears to be

As a novice coder with limited English skills, I apologize in advance. Here is the CSS code snippet I am working with: #wrapper{ width: 200px; height: 300px; border: solid 1px #000; overflow: visible; white-space: nowrap; } .page{ ...

jquerycsshtmlvariablesinsertafter

React JS and Webpack encountering issue 'Unable to locate module 'webpack-cli/bin/config-yargs'' while running 'npm run start'

I have recently embarked on creating a React JS project from scratch, utilizing Webpack to compile assets and aid in development. However, I am encountering some issues when attempting to execute "npm run start." Below is a snippet of my package.json file ...

reactjsnpmwebpack

The Node.js express seems to be unable to fetch the css and js files

Sharing my main.ts file in which I am facing issues with linking my css and js files. view image import express from 'express'; import {Request,Response} from 'express'; import expressSession from 'express-session'; import pat ...

javascripttypescriptexpress

Possible rewrite: "Tips for extracting columns and rows from object data in React using '@material-ui/data-grid'"

I am currently working on retrieving data from a mockapi and displaying it on my data grid. The data grid requires specific rows and columns to be defined. While I have manually set these up for practice, I now aim to fetch object data using axios and th ...

reactjsaxiosmaterial-ui

How come the text is not centered when I use text-align:center; on my class "text5"?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Homepage</title> ...

htmlcsscenter

Having trouble setting up a React 18 project with TypeScript and Redux Toolkit

I'm encountering an issue while setting up a project with the latest versions of React 18, TypeScript, and Redux Toolkit. Specifically, I'm facing a problem when trying to install '@reduxjs/toolkit', as it throws the following error: np ...

reactjsreduxredux-toolkit

The video.play() function encountered an unhandled rejection with a (notallowederror) on IOS

Using peer.js to stream video on a React app addVideoStream(videoElement: HTMLVideoElement, stream: MediaStream) { videoElement.srcObject = stream videoElement?.addEventListener('loadedmetadata', () => { videoElement.play() ...

javascripthtmlreactjsstreamwebrtc

Issue arose following implementation of the function that waits for the event to conclude

I've encountered a problem with my HTML and jQuery Ajax code. Here's what I have: <form> <input name="name_field" type="text"> <button type="submit">Save</button> </form> $(document).on("submit", "form", fu ...

javascriptphpajaxjquery

Exploring the assortment of reactions post-awaitReaction in node.js

The current code runs smoothly, but I encounter an issue when attempting to send messages after selecting either the X or check option. Instead of the expected outcome, I receive Despite my understanding that this collection is a map, all attempts to acce ...

javascriptnode.jscollectionsdiscord.js

Typescript is issuing warnings when displaying errors for the RTK query

I am currently using React Ts and Rtk query. My goal is to display the API response error on the UI. While it's working, I am encountering a warning that prompts me to set an error type for the response errors. How can I incorporate an error type for ...

reactjstypescriptreduxrtk-query

Applying FAB (Material UI) to span across 2 columns in a CSS Grid: A step-by-step guide

Is there a way to make the zero button larger than the other buttons in its row by spanning 2 columns? I would like it to be an oversized oval shape. Appreciate any assistance you can provide. import "./styles.css"; import Button from '@mui/materia ...

cssreactjsmaterial-ui

The AJAX request encountered an error due to an Unexpected End of JSON Input

My AJAX code is encountering an error message. parsererror (index):75 SyntaxError: Unexpected end of JSON input at parse (<anonymous>) at Nb (jquery.min.js:4) at A (jquery.min.js:4) at XMLHttpRequest.<anonymous> (jquery.min.js: ...

javascriptphpjqueryjsonajax

Experiencing difficulties with positioning text beside an image

Hello everyone, I'm a first-time poster seeking some assistance. I'm currently tackling an assessment and am struggling with the final part. The task involves creating a picture card with an image at the top, a circular image to the side, and tex ...

htmlcssflexboxcss-grid

Tips for executing a .exe file in stealth mode using JavaScript?

I am currently working on the transition of my vb.net application to JavaScript and I am facing a challenge. I need to find a way to execute an .exe file in hidden mode using JS. Below is the snippet from my vb.net code: Dim p As Process = New Pro ...

javascriptnode.jsvb.net

What specific authentication process does react-aad-msal employ?

I'm curious about the authentication method employed by the react-aad-msal library. Do you know if it utilizes implicit flow? Link to react-aad-msal ...

reactjsauthenticationazure-active-directory

Search for an element deep within a tree structure, and once found, retrieve the object along with the specific path leading to

I created a recursive function to search for a specific object and its path within a tree structure. However, when I changed the target ID (from 7 to 10) in the function, I encountered an error: "message": "Uncaught TypeError: Cannot read ...

javascriptreactjstypescriptalgorithmrecursion

What steps should I follow to update my NextJS version from v11 to v13?

I am currently working on upgrading the dependencies of my NextJS project to address security vulnerabilities using npm v9.5.1. The reason behind this task is the detection of a security issue by npm audit in my project: node-fetch <2.6.7 Severity: hi ...

reactjsnpmnext.jsnpm-install

Discovering parent elements far up the DOM hierarchy using jQuery

I'm a bit confused about how to locate an element that is a parent element further up the tree. $('.btn-action').hover( function(){ $(this).find('.product-card').addClass('animated bounce'); }, function(){ ...

javascriptjqueryfindparent