I am interested in implementing a CSS overlay on an image

Is it possible to add an unclickable overlay on top of an image?

I have provided a CodePen link in the comments section.

Here is the HTML for the image:

<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" />

And here is the CSS code to achieve the desired effect:

img{
  width:100px;
  height:100px;
  cursor: not-allowed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 1000;

}

The overlay will have grey opacity and cover the image completely. For reference, please see this example:

javascriptcsscss-selectorsoverlayopacity

Answer №1

<div class="custom-container">
  <img src="https://www.example.com/image.jpg" />
  <div class="overlay-effect"></div>
</div>

Include the following CSS:

img {
  width: 120px;
  height: 120px;
}
.custom-container {
  width: 120px;
  height: 120px;
  position: relative;
  pointer-events: none;
}
.overlay-effect {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba( 255, 0, 0, 0.5 );
}

Answer №2

If you want to insert an additional div element following the <img> tag, you can apply the following CSS styles:

img{
  width:100px;
  height:100px;
  
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  

}
div{
  position:absolute;
  width:50px;
  height:30px;
  cursor: not-allowed;
  top: 80px;
  left: 10px;
  right: 0;
  bottom: 0;
  background-color: grey;
  z-index:1000;
  opacity:0.5;
}
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" />
<div></div>

You can also customize the opacity and dimensions of the overlay div as needed.

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

What is the best way to initialize firebase with context in a React application?

Currently, I'm following a tutorial at this link: I've hit a roadblock at the following step: Context.jsx import React from 'react'; const FirebaseContext = React.createContext(null); export default FirebaseContext; index.js impo ...

javascriptreactjsfirebase

Dynamic Isotope grid and seamless inline AJAX commentary

I'm currently utilizing the isotope plugin on my website, which is still in the local development phase. However, I've encountered a CSS issue that I'm hoping to receive assistance with. Here's the scenario: <div class="wrapper"> ...

cssajaxcommentsinline

Having trouble getting items to align properly in Bootstrap

As a student, I am struggling with my development skills while attempting to create a personal website. I am encountering difficulty aligning items on my rows in bootstrap. Here is what I am trying to accomplish: 1. However, I am currently stuck at this po ...

htmlcsstwitter-bootstrap

`Vue Component failing to display data from Blade File`

In my project using Laravel Blade, I am currently in the process of converting some blade files to Vue components. One challenge I encountered is trying to display a dynamically created page title on the screen from the Vue component rather than the blade ...

javascriptphplaravelvue.js

Splitting areas within a liquid vessel using bootstrap 5

My container is structured like this with divisions: <div class="container-fluid"> <div class="row"> <div class="col-3"> sidebar </div> <div class="col-7"> top slider </div> <di ...

htmlcsstwitter-bootstrapbootstrap-5

Do you need the Tooltip Module for Angular-bootstrap popover to work properly?

"Could it be possible that my popover isn't working because it requires the tooltip module just like the Bootstrap jQuery plugin?" Is this the reason my popover isn't functioning as expected? What exactly is the tooltip module and do I need to i ...

javascripthtmlangularjstwitter-bootstrappopover

What is the best way to leverage multiple random YouTube v3 API keys simultaneously?

I have the following code snippet and I am looking to randomly select an API key from a list of keys: function search() { // Clear Results $('#results').html(''); $('#buttons').html(''); // Get Form Input ...

javascriptjsonapiyoutube-apiyoutube-javascript-api

Why is req.app.post(...)create_event not functioning as expected?

Currently, I'm utilizing axios, node.js, express.js, and SQL to send a post request to my database. However, each time I attempt to do so, I encounter an error message stating: "TypeError: req.app.post(...).create_event is not a function". I've b ...

javascriptnode.jsexpressaxios

Anticipated request for spy navigation with path '/members' was expected, but unfortunately was not triggered

I am facing an issue with a service method that performs an HTTP delete operation. The expected behavior is that upon successful deletion, the page should be redirected to another location. However, during testing, I noticed that the router navigation func ...

javascriptangulartypescriptunit-testingkarma-jasmine

display ngx spinner 1 second later

Implementing a centralized interceptor that logs all HTTP requests and uses ngx-spinner for each request. The requirement is to delay the loader by 1 second after the HTTP request, showing the spinner only if the response is still in progress after the del ...

javascriptangularangular8

Removing a value from a JSON object by utilizing the .map function

My JSON object is structured as follows: [{"box":1,"parent":[],"child":[{"boxId":2},{"boxId":3}]},{"box":2,"parent":[{"boxId":1}],"child":[]}] I am attempting to remove the element "child":[{"boxId":2} with boxId=2 from the object. I have tried using a , ...

javascriptjqueryjson

Is there a way to position an image to the left of the container in Jinja templating while floating it?

I am currently working on a project using Flask that utilizes Jinja templates. In my layout.html file, there is a grey colored container that extends to all child pages. I have a specific page that extends the layout.html where I want to place an image flo ...

htmlcssflaskjinja2

Learn the steps for showcasing user information in a tabular layout by utilizing session management with node.js, react.js, and SQL

This view page redirects users to their details Hello everyone, I am currently working on a project that includes two forms: login and user details. When a user logs in and fills out the details form, they should be redirected to a view page where they ca ...

javascriptsqlnode.jsreactjsexpress

Ways to stop the floating label from blending with the input field

Attempting to incorporate the Bootstrap Material design theme into my project, I have implemented a basic text input field using the code below: <div class="form-control-wrapper"> <input class="form-control empty" type="text"></input> ...

htmlcsstwitter-bootstrapcss-floatbootstrap-material-design

Personalized path-finding tree iterator

I am trying to implement a custom iterator in JavaScript that can traverse a DOM tree based on specific criteria provided by a callback function. The goal is to return an array of the nodes that match the criteria as the generator iterates through the tree ...

javascripttypescriptiteratorgenerator

When attempting to make my styles responsive, I found that they broke due to duplicate classes on the landing page I was creating with next.js and styled components

Something strange is unfolding, and I find myself confused about the overall situation. Let me try to explain it the best I can. On my landing page, there are three different components: const Home = () => { return ( <> <Head> ...

javascriptcssnext.jsstyled-components

Tips for inserting an image within a horizontal list of items

Struggling to find a solution here. I have a menu with a unique bar design between list elements, featuring breaks at the top and bottom. I attempted to use li:after in the CSS to insert an image, but encountered issues with padding and margin. Below is t ...

htmlcsstwitter-bootstrap-3

Having trouble getting the jQuery AJAX post syntax to work properly

I am trying to send a post json value to another page using AJAX. However, when I include the "json" parameter in my POST request, the JavaScript code stops working. If I remove the "json" parameter, it works fine. I am still learning jQuery so any help ...

javascriptjqueryajaxjson

What is the best combination of tools to use for web development: express with jade/ejs, along with html5, css

As I delve into learning node.js/express, a question arises about how jade/ejs, html, and css work in harmony. Allow me to share my understanding: The application logic is implemented in node.js/express A portion of this logic/variables is injected into ...

htmlcssnode.jsexpresspug

The select box in CSS is optimized for Chrome but poorly displayed in Firefox

Struggling with styling the select box for both webkit and moz browsers. It looks great in Chrome, but terrible in Firefox - the default option is not vertically aligned with the select box. Can someone help me pinpoint the issue in this code? CSS: sele ...

cssgoogle-chromefirefoxselect