Applying a translucent layer of color to a jpeg image to create a subtle background effect

I am attempting to create a semi-transparent, solid background color on top of an <img> tag, while still showing the original image underneath at the same ratio and size. Below is a snippet of the code I am working with (let me know if you need more information - the JS and CSS are inline and jQuery 3.6.0 is being used):

<div class="home-screen">
  <img class="background" alt="Background Image" src="./assets/images/Desktop_Pictures/Catalina-min.jpg" />
</div>

div.home-screen {
  height: 100%;
  overflow: hidden;
}

div.home-screen img.background {
  top: -50%;
  margin-left: 0;
  transform: translateX(0);
  width: 100%;
  position: fixed;
}

var isLaunchpadOpen = false;

function openLaunchpad() {
  if (isLaunchpadOpen == false) {
    $("div.home-screen")
        .css("background-color", "rgb(211, 211, 211)")
        .css("background-origin", "content-box")
        .css("top", 0)
        .css("position", "fixed");

    $("div.home-screen img.background")
        .css("background-blend-mode", "multiply")
        .css("filter", "opacity(50%)");

    isLaunchpadOpen = true;
  } else if (isLaunchpadOpen == true) {
    $("div.home-screen img.background")
        .css("background-color", "none")
        .css("filter", "opacity(100%)")
        .css("background-blend-mode", "normal");

    isLaunchpadOpen = false;
  }
}

Please note that this code excerpt is specifically related to the issue I am encountering.

javascripthtmljquerycss

Answer №1

If you want to apply transparency to an image, you can utilize the CSS filter property with opacity

img {
 filter:opacity(50%);
}

To learn more about the css filter property and see examples, check out this link:

I hope this information proves helpful ;) css filter property

Answer №2

  1. To start, add position: relative; to the wrapper element of the image: 
    .home-screen { position: relative; }

  2. Next, create a pseudo-element using ::after that covers the entire wrapper: 
    .home-screen::after { display: block; content: ""; position: absolute; inset: 0;

  3. Give the pseudo-element a semi-transparent background color by specifying an rgba value.

.home-screen {
  position: relative;
}

.home-screen::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 255, 0.5);
}

/* for styling purpose only */
img {
  width: 100%;
}
<div class="home-screen">
  <img class="background" alt="Background Image" src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg" />
</div>

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

The jQuery message validator is currently experiencing some issues with its functionality

I am working on implementing a basic login system using jQuery and it appears to be functioning correctly, but I keep getting an error message in my jQuery code here: alert('Error in system');. What's puzzling is that when I use alert(answe ...

javascriptphpjquery

I have noticed that the brand section of the navigation bar changes to black when I hover over it, but I have been unable to locate any

I'm currently working on a Rails application that has a navbar-top with a brand element. However, I've encountered an issue where the background of the brand element turns black when I hover over it. Despite inspecting the browser console, I coul ...

cssruby-on-railstwitter-bootstrap-rails

The app in NextJs encounters layout issues on all pages due to a break in

I've developed a NextJs application using npx create-next-app and attempted to implement my own custom layout. However, this resulted in breaking the app unexpectedly without any clear reason. The project structure includes: components -> Footer.j ...

javascriptnode.jsmemorynext.js

Change the size of a particular div upon hovering over another element

I'm trying to figure out how to scale my div with text when a user hovers over a button, but I've tried various operators like >, ~, +, - with no success. section { background: #000; color:#fff; height: 1000px; padding: 150px 0; font-family ...

javascriptjqueryhtmlcss

Blocking server.js in node.js can be achieved by modifying the code to prevent

Challenge Description In my server.js file, I have included a config file. This is how my server.js file looks: Includes some necessary imports Requires config.js -> makes an API call to get the configuration data using promises Starts the ser ...

javascriptnode.jsexpressasync-await

Combining two states in the Vuex store

In my Vuex store, I have two states: notes (synced notes with the server/DB) localNotes (unsynced notes that will move to 'notes' state upon syncing) To display the notes in a list, I use a getter that merges the two objects and returns the me ...

javascriptvue.jsvuex

Utilize PHP's file_get_contents to trigger the Google Analytics tracking pixel

For certain goals I have set up in Google Analytics, I am unable to use the JavaScript tracking. Instead, I am interested in achieving the same result by making a call with PHP. One solution that seems straightforward to me is to invoke the URL of the tra ...

javascriptphpgoogle-analytics

Invoke the jquery plugin upon completion of the HTML load via Ajax

For my current project, I needed to style input radio buttons and decided to use the jquery uniform plugin. However, the radio buttons are displayed after some Ajax content is loaded onto the page. Since I do not have permission to edit the form or Ajax ...

javascriptjqueryajaxknockout.js

Countdown with precision! This timer will begin at the one-hour mark

Having an issue with my JavaScript stopwatch. When I hit the start button, the stopwatch immediately shows one hour (01:00:00) before counting normally. Any solutions to prevent this instant start at one hour would be highly appreciated. Thank you in adv ...

javascriptstopwatch

Tooltip positioned within a custom container using Material UI

Currently, as part of my Chrome extension development utilizing React and Material UI, I am implementing an inject page strategy. I have managed to set up a tooltip for the Fab button, but unfortunately, it appears outside the DOM of my extension. Upon ins ...

javascripthtmlreactjsgoogle-chrome-extensionmaterial-ui

Should the element be scrolled beyond a fixed-positioned element

Is there a way to determine if an element is scrolled behind another element that is fixed at the top? I am looking to trigger some javascript when an element is positioned below a fixed element and every height or scrollTop thereafter. I am attempting t ...

javascriptjquerycsscss-positionsticky

Utilizing iteration in jQuery to apply attributes to individual elements

My objective is to apply styles of wrappers to images. These styles are added by jquery ui and placed in the html within an iframe: <div class="wrapper style:"xyz"> <img id="link1"> </div> <div class="wrapper style:"abc"> &l ...

jqueryjquery-uidom-manipulation

Safari is causing issues with HTML5 Video playback

I have a client with a media-heavy website containing numerous video and audio files. While the videos load perfectly on Chrome, Firefox, and IE, they do not load on Safari for Windows. Here's a snippet of the code: <video controls="controls" type ...

javascripthtmlvideohtml5-video

Having trouble with the clear button for text input in Javascript when using Bootstrap and adding custom CSS. Any suggestions on how to fix

My code was working perfectly until I decided to add some CSS to it. You can view the code snippet by clicking on this link (I couldn't include it here due to issues with the code editor): View Gist code snippet here The code is based on Bootstrap. ...

javascriptjqueryhtmlcsstwitter-bootstrap

Having trouble preventing Selenium webdriver from automatically closing the safari browser

Experiencing a strange issue with Safari where it closes the browser immediately after running the code snippet below, while Chrome and Firefox behave as expected. I am using Webdriver with JavaScript for this automation. let driver = await new Build ...

javascriptseleniumselenium-webdriversafari

How to access an element from the JSON return value retrieved from an AJAX call using JavaScript

After making an ajax call that returns successfully, I am facing a problem. I cannot access individual elements of the array it returns, and therefore unable to console log it. The error message indicates that the track is not defined, even though it is pr ...

javascriptjqueryarraysjsonajax

Separating JQuery toggles for a unique user experience

Looking for a way to toggle my contents under separate list items without assigning each content a separate class or id. What's the best method to implement this in a generic way? Check out this demo for an example. ...

jquerytoggle

Reducing image size using CSS can result in blurry images on multiple web browsers

Encountering challenges with downscaled images in multiple browsers... The images must be downscaled to adapt to the browser size. Here is the code snippet: #pic-holder img { -moz-transform: rotate(0deg); /*image-rendering:-webkit-optimize-contras ...

cssimagefirefoxsafari

The MUI Grid design features information displayed on the left side, accompanied by an image placed directly to the right

In the React MUI V5 sample code below, I am creating a profile page layout with details of a person displayed on the left side of the page in label/value format. My question is how to position an "IMAGE" entry (assume it's a 300px x 300px profile ima ...

javascriptcssreactjsmaterial-uicss-grid

Send information from the textbox

I am trying to extract data from an input field and use it to create a QR code. While passing the value as text works, I am facing issues with passing the actual input value. Does anyone have a straightforward example of this process? import React, {Comp ...

javascriptreactjs