Is there a way to adjust the opacity of a background image within a div?

I have a lineup of elements which I showcase in a grid format, here's how it appears:

https://i.stack.imgur.com/JLCei.png

Each element represents a part. The small pictures are essentially background-images that I dynamically set within my html.

Upon hovering over them, some text emerges on that panel while the background image remains visible. Now, my objective is to add some transparency to that background-image. It sounds simple, but I'm struggling to figure out how to achieve this despite trying various methods suggested in other threads.

Below is the relevant portion of my html code:

<div
  *ngIf="!isFile()"
  class="image-container"
  (mouseenter)="onMouseHover()"
  (mouseleave)="onMouseLeave()"
  (click)="onDokumentClick()"
  [style.background-image]="'url(' + thumbnailPathGenerator() + ')'"
>

and this is my scss snippet:

.image-container {
  border-radius: 4px;
  background-repeat: no-repeat;
  background-position: center center;
  box-sizing: border-box;
}

.image-container:hover {
  border-radius: 4px;
  box-sizing: border-box;
}

The url for the background-image is generated in the template, presenting a challenge...

Any suggestions on how I can apply opacity to my image-background?

htmlcssangular

Answer №1

If we were to code this in pure JS, HTML, and CSS, it might look something like the following - with the CSS variable --bg set to the URL of the background image that can be accessed by the pseudo-element style:

const div = document.querySelector('.image-container');

function thumbnailPathGenerator() {
  return 'https://picsum.photos/id/1015/150/150';
}
div.style.setProperty('--bg', 'url(' + thumbnailPathGenerator() + ')');
.image-container {
  border-radius: 4px;
  box-sizing: border-box;
  position: relative;
}

.image-container::before {
  content: '';
  background-image: var(--bg);
  background-repeat: no-repeat;
  background-position: center center;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.image-container:hover::before {
  border-radius: 4px;
  box-sizing: border-box;
  opacity: 0.4;
}
<div class="image-container" style="width: 50vmin; height: 50vmin;"></div>

I am not familiar with Angular myself, but I understand that you can now (starting from version 9) define a CSS variable like so:

<div
  *ngIf="!isFile()"
  class="image-container"
  (mouseenter)="onMouseHover()"
  (mouseleave)="onMouseLeave()"
  (click)="onDokumentClick()"
  [style.--bg]="'url(' + thumbnailPathGenerator() + ')'">
>

Please note: I am unsure about the function of your mouse enter and leave functions. Do they serve a purpose if opacity is handled through CSS?

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

Creating multiple nested ng-repeats in an AngularJS table

Managing a large amount of data on users' availability by hour for multiple days can be challenging. The data is structured as follows: availData = { "date1":arrayOfUsers, "date2":arrayOfUsers, ... } arrayOfUsers= [ userArray, userArray, ... ] user ...

javascripthtmlangularjs

Google Web Fonts: Exploring the World of Font Weight Variations

It's quite puzzling as to why the weight of my Google web font in the navigation menu keeps changing on different pages even though I have specifically set it to 700. The CSS for the menu is exactly the same across all pages. Can anyone shed some ligh ...

htmlcssfontsfont-sizegoogle-webfonts

Making an HTTP request within a forEach function in Angular2

Encountering an issue while using the forEach function with HTTP requests. The _watchlistElements variable contains the following data: [{"xid":"DP_049908","name":"t10"},{"xid":"DP_928829","name":"t13"},{"xid":"DP_588690","name":"t14"},{"xid":"DP_891890" ...

javascriptangularasynchronousxmlhttprequest

Sending user input from search component to main App.js in React

I'm currently working on an app that searches a Movies database API. I have a main fetch function in App.js, and in tutorials, people are using a search bar within this main APP component. I'm wondering if it would be better to create a separate ...

javascripthtmlcssreactjsjson

Missing inkbar in Material UI tabs when using ReactJS

For some reason, the small inkbar is not appearing under this tab. I suspect it might be a css issue that I can't seem to figure out. It's possible that I'm missing something I don't know about or maybe the height of the tab is too high ...

cssreactjsmaterial-ui

I'm having trouble adding a background image, even though I have set it to static. What could be

I attempted to add a background image to my Django website, but unfortunately, it was not successful. I followed the steps provided in this Stack Overflow answer here, however, it did not work. I even made changes to the database by migrating them, but s ...

javascriptpythonhtmlcssdjango

Can anyone provide guidance on how to simulate a click on a JavaScript action for an iPhone?

I am attempting to trigger a click on a "javascript:void(0)" link so that I can retrieve HTML data within the script. Can someone advise me on how to achieve this without using illegal APIs like UITouchEvent, as I only work with NSUrl? Thank you in advan ...

javascriptiphonehtmlnsurl

When combining <a> with the class line-through, the line does not appear

I am currently utilizing a class to replace the deprecated strike in HTML: .entfall { text-decoration: line-through; } However, when using Firefox 38.x and the following code: <span class="entfall"><a href="some link">text</a></span ...

htmlcss

How to access objects in Angular2 without using pipe or ngFor

Suppose I have the following data in an asymmetric array: [{'name':'user','password':'123'},{'title':'officer','grade':'5','age':'5'}] which is obtained f ...

jsonajaxangular

What kind of impact on performance can be expected when using index.ts in a Typescript - Ionic App?

When setting up the structure of a standard Ionic app, it typically looks like this: app pages ----page1 ---------page1.ts ----page2 ---------page2.ts If I were to include an index.ts file in the pages folder as follows: pages/index.ts export { Page1 } ...

angulartypescriptimportmoduleionic2

Align list items in the center horizontally regardless of the width

I have created this container element: export const Container = styled.section<ContainerProps>` display: flex; justify-content: center; `; The current setup is vertically centering three list items within the container. However, I am now looking ...

javascriptcssreactjsnext.js

Here's how you can pull information from a MySQL database and showcase it on an HTML

I successfully created a database in MySQL where users can enter their details on /upload.html, which then get stored in the test2 database and person_list table. However, I am facing an issue with displaying this data on /download.html. My goal is to hav ...

phpmysqlhtml

What's the best way to make sure my table fits perfectly within its container's width?

I've encountered an issue with a table: If you want to see how the table was created, check it out on jsFiddle I attempted to modify the CSS like this : table{ width:100%; } td span { float:right; width:20%; text-align:center ...

jqueryhtmlcsstwitter-bootstrap

When a radio button is checked, add a class to its parent element that has a specific class assigned to it

In order to dynamically add a class to a specific div element higher up the DOM hierarchy when a radio button is clicked, I am in need of assistance. There are multiple instances of these div elements with different radio buttons, so it is crucial that on ...

javascriptjqueryhtml

What's the best way to implement a font family in a React component?

I'm currently attempting to implement the font found at: https://fonts.google.com/specimen/Source+Code+Pro After downloading the font into my directory, it appears as shown in this image: enter image description here This is how I have it set up: &l ...

cssreactjsfonts

invoking a JavaScript function from an HTML file

I want to create a JavaScript server on Raspbian that not only serves .html content to the browser but also allows for user input through events like button clicks. Both my .html and .js files are located in the same directory, and I have used absolute pat ...

javascripthtmlnode.jswebserver

In Javascript, navigate to a specific section by scrolling down

Currently, I am in the process of enhancing my portfolio website. My goal is to incorporate a CSS class once the user scrolls to a specific section on the page. (I plan to achieve this using a JavaScript event). One approach I am considering is initially ...

javascripthtmlcssdom

Tips on keeping a div element in a fixed position until triggered by jQuery

I've managed to create a navigation bar within a header that sticks to the top of the screen once you scroll down past 100px. The functionality works well, but I'm looking to make the navigation bar stay fixed on the right until it snaps, essenti ...

javascriptjqueryhtmlcss

Sending JSON RPC post requests in Angular 4

Attempting to retrieve JSON RPC data from the server using Angular 4 HttpClient. The error message received is {code: -32600, message: "INVALID_JSON_REQUEST: The JSON sent is not a valid JSON-RPC Request object"}. The command used is: curl -i -X POST -d ...

angularhttpclientjson-rpc

Upon opening index.html in the browser, the jQuery code fails to execute, as no errors are displayed in the console

I am struggling to make a simple toggleClass() function work in jQuery and I can't seem to figure out why. This is just a beginner exercise for me with jQuery. The code works perfectly when I test it as a snippet or manually in the console, but when I ...

javascriptjqueryhtmlcss