Enhance your React project by incorporating Material-UI card media elements with the ability to add

I am trying to figure out how to create an opaque colored overlay on top of an image using Material-UI. While it is possible with plain HTML, CSS, and JavaScript, I am facing some challenges with Material-UI.

<Card>
   <CardMedia>
      <img alt="" src={this.props.Webpull} />
   </CardMedia>    
</Card>

The code above will insert an image into a card component.

My question is: How can I implement a feature where clicking on the image adds an overlay in the color rgb(0,0,255,0.3) that remains permanently visible?

Any suggestions or solutions would be greatly appreciated! Thank you.

javascripthtmlcssreactjsmaterial-ui

Answer №1

After analyzing the issue, it appears that this is the precise solution you've been searching for. The div element contains a nested div with the class name layer. 

class MyCard extends React.Component {
  imageClick = () => {
    this.refs.layer.style.display = "block";
  };
  render() {
    const { classes } = this.props;
    return (
      <Card>
        <div className="cardWrapper" onClick={this.imageClick}>
          <CardMedia
            alt="My cool img"
            component="img"
            className={classes.media}
            image="https://placeimg.com/100/100/nature"
          />
          <div className="layer" ref="layer">
            New layer
          </div>
        </div>
      </Card>
    );
  }
}

...along with some CSS...

.cardWrapper {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.layer {
  position: absolute;
  background-color: rgba(0, 0, 255, 0.3);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
}

This setup ensures that the layer remains visible as per your requirements.

View Example

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

When conditions are met, all items are added to the array

In my Angular app, I have a user list that I am trying to filter based on the condition age > 45. However, all users are being pushed into the validForScheme array instead of just those meeting the condition. I am unable to figure out what is going wron ...

javascripthtmlangularjsarrays

Having trouble with image URLs not working in React JS?

I am currently encountering an issue with displaying an image in my project. I have provided a relative path in the src properties, but unfortunately, it is not working as expected. If anyone has any suggestions or solutions to offer, please feel free to ...

reactjs

Tips on when to display the "Email Confirmation" input text box only after updating the old email

Oh no!! Yes, that's exactly what I desire! I've been facing obstacles in trying to understand how to display the "Email Confirm" input text-box ONLY when the old email has been updated. Can someone point out where I might have gone wrong? :( ...

javascriptphpjquerylaravel

Validate the date selected in a dropdown menu using JavaScript

I'm still relatively new to Javascript, just working my way through some tutorials. I have three select boxes in my HTML form as shown below. HTML Form: <table> <form id="enrolment" name="enrolment" onsubmit="return datevalidate();" action ...

javascriptvalidationdate

An issue arises when attempting to fetch data using next.js: a TypeError occurs indicating that

I'm currently working on setting up a next.js website integrated with strapi, but I've encountered an issue with my fetch request. Oddly enough, when I test the request using Postman, the data is successfully returned, indicating that the endpoin ...

javascriptnext.jsfetch-api

Experiencing a problem with XAMPP? Changes made to the code are not reflected after saving

Recently, I've encountered a strange issue with my XAMPP test server while working on a game project. Everything was running smoothly until I noticed that when I make changes to certain files in Notepad++ and save them, the updates are not being refle ...

javascriptjqueryhtmlxampp

Choose the row based on the values in the columns

I am facing a situation where I have to choose a specific row in a datatable that displays rows in groups of 10, based on the value of its column. Previously, I successfully used the following code to select the first row. myGroupTable.row(':eq(0)&ap ...

javascriptdatatables

securely managing file access through lockfile.locksync in node.js

Currently, I am utilizing lockfile.locksync to secure a file in my node.js application. However, I am interested in understanding the inner workings of this utility in more detail. Despite multiple resources referring to it as a "very polite lock file util ...

javascriptnode.jsnpmlocking

JavaScript object conversion to Java Model is proving to be a challenge

When looking at my Spring controller and client-side Javascript code, I noticed that the Javascript object is having trouble reaching the Spring controller in Object form. Here is a snippet of my Controller code: @RequestMapping(value = "/addRating", meth ...

javascriptjavaajaxspring

Place the bottom element of the top parent element in position

Creating a simple tooltip with bottom positioning at the top of the parent element involves setting a negative height for the tooltip element. However, when checking the height of the tooltip element upon hovering, it returns 0 according to console.log(). ...

javascriptjquerycsstooltip

Delving into the World of ES6 Symbols

Throughout my experience with various programming languages, from C# to Lisp to Scala to Haskell, symbols have consistently behaved as singleton objects. This means that any two symbols with the same name are guaranteed to be identical. In Racket: (equal? ...

javascriptecmascript-6symbols

Ways to verify the presence of an item in a MonoDB array

My MongoDB model looks like this: const userSchema = new Schema = ({ name: { type: String }, company: [ companyId: { type: String, }, movies: [ { genre: { type: String, enum: [ ...

javascriptnode.jsmongodbmongoosemongodb-query

Utilizing Node.js within a closed intranet environment

Utilizing Nodejs's npm has proven to be quite convenient. Thus, I made the decision to incorporate it into my company's project. However, a predicament arises as my company mandates development within a closed network. This restricts my access s ...

javascriptnode.jsnpm

Tips for centering the second content within a div block

<div style="height: 100%; background: red"> <div style="height: 100px; background: green"> </div> <div style="background: blue;"> <h1>Content</h1> </div> </di ...

htmlcss

Are you struggling with perplexing TypeScript error messages caused by a hyphen in the package name?

After creating a JavaScript/TypeScript library, my goal is for it to function as: A global variable when called from either JavaScript or TypeScript Accessible via RequireJS when called from either JavaScript or TypeScript Complete unit test coverage Th ...

javascripttypescriptnpmumd

Tips for dynamically updating an input within a shadow DOM using code?

Snippet: https://jsfiddle.net/5zrwdjy7/2/ I'm currently working on automating keystrokes with a script within Cypress, however, the target website I am dealing with utilizes web components as inputs. These input elements are nested inside what is kno ...

javascriptjqueryfrontendweb-component

Undefined index when decoding JSON data

When calling the save function, a $.post is sent to 'upp.php' as follows: function save(){ var oldItems = JSON.parse(localStorage.getItem('itemsArray')) || []; var newItem = {}; var num = document.getElementById("num").value; newIte ...

phpjavascriptajaxjson

Exploring the world of CouchDB through jQuery and AJAX POST requests while navigating

I am in the process of building a simple web application. Today, I installed Couch 1.3.1 and set up a database. I am currently trying to save a document to my local Couch (localhost:5984) using a POST request from a client browser that is also on localhost ...

javascriptjqueryajaxcouchdbcors

Tips for formatting the return Date when utilizing the setDate() method

I set the end of the week to be the upcoming weekend using the following code snippet this.weekEnd = new Date(this.currentDate.setDate(end)); Now, my goal is to update the weekEnd by adding 7 days to it. I attempted to achieve this as shown below, however ...

javascriptangulardate

GHCJS: A guide on integrating a JavaScript library designed for npm in your project

Currently, I am using ghcjs-0.2.0.9006030_ghc-7.10.3 along with stack lts-6.30 for developing a frontend application. Following the suggestions in this particular blog post, I decided to utilize react-flux and material-ui. To do this, I inserted React&apos ...

reactjshaskellnpmmaterial-designghcjs