Overlay a translucent image on top of another using JavaScript

Is it feasible to overlay a transparent-background image onto another image using JavaScript? For example, if you have a website featuring various product pictures and some of these products are recalled, can you superimpose the Do-Not-Enter sign (circle-with-slash icon) on those images without altering the original images? The intention is to maintain the visibility of the original picture while adding the overlay.

Would placing the transparent-background image inside a DIV element without opacity, sizing both the image and its container based on the dimensions of the original image using clientWidth and clientHeight, and positioning the DIV over the original image be a suitable approach? If the window is resized or the layout changes dynamically, how would you instruct the superimposed DIV to adjust to the new location of the original image? Is there an event like LayoutChangedEvent to handle this scenario? Would monitoring the position of the original image periodically using setInterval be necessary?

javascriptimagetransparencyopacity

Answer №1

To achieve this effect, you can utilize CSS without the need for Javascript.

An easy way to implement this is by wrapping the product image in a container and setting the container's position to relative. This allows child elements to be positioned relative to the container, regardless of window size changes.

Check out a live demo on jsFiddle: http://jsfiddle.net/VNqSd/2/

HTML

<div class="container">
  <img src="http://nontalk.s3.amazonaws.com/product.png" 
       width="100" height="100" />
  <img src="http://nontalk.s3.amazonaws.com/overlay.png" 
       class="overlay" width="100" height="100" />
</div>

CSS

.container {
  position: relative;   
}
.overlay {
  position: absolute;   
  left: 0;
  top: 0;
  z-index: 999;
}

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

Adjust background color on click using JavaScript

Could someone provide me with the JavaScript code to change the background color of a page from blue to green when a button is clicked? I have seen this feature on many websites but haven't been able to write the code myself. I am specifically lo ...

javascripthtmlcssreactjs

How can you simulate a 'click' event on the currently active tab of a jQuery tab?

Hey there, I'm trying to automate a tab click on my website when a form is submitted and the return is valid. Here's a snippet of the HTML code: <ul id="tabUL" class="tabs js-tabs same-height"> <li class="current"> <a ...

javascriptjqueryeventsjquery-ui-tabseventtrigger

Express Validator: The Art of Isolating Validation Logic

This query is more focused on structuring code rather than troubleshooting bugs or errors. I am currently tackling request body validation, where the JSON structure looks like this: { "title": "Beetlejuice", "year&qu ...

javascriptnode.jsexpressexpress-validator

What is the best way to split up the information and place it into separate text boxes?

I am currently working on a page that allows users to create and edit email structures. To facilitate editing, I added two columns to the page. One of the columns displays information from all the email structures along with two buttons - one for editing ...

javascriptphpjqueryjson

The Angular2 Observable fails to be activated by the async pipe

Take a look at this simple code snippet using angular2/rxjs/typescript public rooms: Observable<Room[]>; constructor ( ... ) { this.rooms = this.inspectShipSubject .do(() => console.log('foo')) .switchMap(shi ...

javascriptangulartypescriptrxjs

The Chrome Extension was denied from loading due to a violation of the specified Content Security Policy

I am encountering an issue while loading a Chrome Extension using React. Whenever I try to load it, the error message below pops up: Refused to load the script 'https://code.jquery.com/jquery-3.2.1.slim.min.js' because it violates the following ...

javascriptreactjsgoogle-chrome-extension

When using NodeJS, having multiple 'if' statements may result in conflicting headers being returned,

Introduction to Promises. Encountering challenges in NodeJS due to the utilization of multiple if-statements and return-statements. Considering leveraging Promise as a potential solution. This snippet showcases an example: const express = require(' ...

javascriptnode.jsexpressif-statement

The FatSecret Sharp API does not support starting an asynchronous operation at the current moment

I'm currently working on an ASP.NET project where I need to integrate the Fatsecret API using a wrapper called FatSecret Sharp. However, when attempting to make a server side method call from my JavaScript script, I encounter an error. I am seeking gu ...

javascriptc#asp.net.netasynchronous

Can we expect Karma to receive updates for upcoming versions of Angular and Jasmine?

We recently attempted to upgrade our company's Angular module, which required updating dependencies as well. Upon upgrading to the latest versions, we encountered an issue with the Jasmine-karma-HTML-Reporter due to its reliance on Jasmine-core 4.x.x ...

javascriptangulartypescripttestingjasmine

"Troubleshooting: Fixing the issue with jQuery datepicker not

After implementing the jQuery Datepicker on a field, I noticed that even though assigning a value to the field shows in Chrome's developer tools... https://i.sstatic.net/We7Ua.png Unfortunately, the assigned value does not show on the front end. I ...

javascriptjqueryhtmljquery-uidatepicker

Loading content dynamically into a div from an external or internal source can greatly enhance user experience on a website. By

As I work on my website, I am incorporating a div structure as shown below: <div class="container"> <div class="one-third column"> <a id="tab1" href="inc/tab1.html"><h2>tab1</h2></a> </div> & ...

javascriptjquerycsshtml

Using AJAX to update the value of a div by clicking within a PHP loop

I'm currently working on a php page where I want to dynamically change the content of a div when a specific link is clicked. The links are generated through a loop, and I need to pass multiple parameters via the URL. Since the divs are also created wi ...

javascriptphpjqueryajax

Please input the number backwards into the designated text field

In my react-native application, I have a TextInput where I need to enter numbers in a specific order such as 0.00 => 0.01 => 0.12 => 1.23 => 12.34 => 123.45 and so on with each text change. I tried using CSS Direction "rtl" but it didn' ...

javascriptreactjsangularjstypescriptreact-native

Uncharted Territory: Exploring asynchronous loops with async await and Promise.race?

Currently, I am involved in a project that requires brute forcing a PDF password. To achieve this task, I am using PDF.js to verify the password and implementing promise.race to execute parallel functions for efficient performance. This is how I have str ...

javascriptnode.jspromiseasync-await

Adding a scrollable feature to a Bootstrap Modal seems to be generating additional unnecessary pages at the

I need help with my scrollable bootstrap modal that has a print button on top. When the user clicks the button, I want to print the modal content. Here is the code snippet: HTML : <div class="container-fluid" id="body-noPrint"> /* HTML BODY CON ...

javascriptjqueryhtmlcsstwitter-bootstrap

Converting an array into a JavaScript Date object

I am currently working with an array of dates and looping through each element. The elements within the array are not date objects but rather strings, I believe. When I print each of the elements to the console, they appear as follows: 2015,09,19 2015,09, ...

javascriptarraysdateobject

Ways to incorporate NPM packages into your browser projects using TypeScript

This is the current setup: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <script src="../node_modules/systemjs/dist/system.js"></script> <script src="../node_modules/lodash/in ...

javascriptnpmtypescript

Identifying HTTP Live Streaming on mobile devices

I am seeking a reliable method to determine if a mobile device can play HTTP Live Streaming (m3u8). Currently, I am using the following script for testing purposes: function isHLSEnabled() { var videoElement = document.createElement('video' ...

javascriptandroidmobilehttp-live-streaming

Is it possible to asynchronously retrieve the information from the HTTP request body in a Node.js environment?

I am trying to send an HTTP POST request to a node.js HTTP server that is running locally. My goal is to extract the JSON object from the HTTP body and utilize the data it contains for server-side operations. Below is the client application responsible fo ...

javascriptnode.jshttppost

When using the Google Maps API fetch() method, the response is empty. However, when accessing the same

I am currently working on extracting the "photo_reference" from the JSON data provided below; { "html_attributions" : [], "results" : [ { "formatted_address" : "Bandar Seri Begawan, Brunei", "geometry" : { "locati ...

javascriptjsongoogle-mapsfetchgoogle-places-api