Combining blend-mode and filter in CSS: A comprehensive guide

Looking to achieve a specific image style by transforming a full color photo in the following ways:

  1. Convert it to greyscale
  2. Adjust the black levels (via decreased opacity or brightness)
  3. Apply a "multiply" blend mode with a blue color overlay

So far, I've only managed to implement one of the effects (either multiply and greyscale OR opacity/levels)

Any suggestions on how to combine both of these effects on either an img element or background image?

View the CodePen demo: http://codepen.io/jeremypbeasley/pen/vENBqO

Current CSS:

body {
    margin:50px;
}

.test:parent {
    overflow:auto;
    background:#0c98f2;
    width:500px;
    height:320px;
}

.test {
    background-image:url(http://f.cl.ly/items/0z1I403f1a3O3v0o0l2b/PageImage-531144-5235316-finalselectsjared12.jpg);
    background-size:cover;
    background-blend-mode:multiply,normal;
    background-color:#0c98f2;
    opacity:.5;
    width:500px;
    height:320px;
}

img {
    width:500px;
}

Answer №1

If you want to recreate your design in CSS, it's possible to do so step by step.

a) To start, turn the image into grayscale and layer it over a black background using the luminosity filter.

b) Next, lower the black level by adding a gray layer with a screen blend mode.

c) Lastly, apply a blue layer with a multiply blend mode.

In the code snippet provided, the b) step is achieved using a gradient, allowing you to visualize different levels of black reduction. Remember, the lighter the gray, the greater the impact.

.custom-demo {
    width: 400px;
    height: 450px;
    background: linear-gradient(blue, blue), linear-gradient(90deg, black, gray), url("http://media.virbcdn.com/cdn_images/resize_1600x1600/4c/PageImage-531144-5235316-finalselectsjared12.jpg"); 
    background-color: black;
    background-size: cover;
    background-blend-mode: multiply, screen, luminosity;
}
<div class="custom-demo"></custom-demo>

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

How to modify an array in an HTML document using BeautifulSoup

Running a Python script, I am trying to access a local HTML file containing a JavaScript array inside a script tag that needs updating. Here is the test code snippet: from bs4 import BeautifulSoup html = ''' <script> var myArray ...

What steps can be taken to properly display dateTime values in a data table when working with JavaScript (VueJS) and PHP (Laravel)?

I am facing an issue where I am unable to save user inputted date-time values from a modal into a data table. Despite receiving a success message, the dateTime values are not being added to the table. My payload only displays the state and approval fields ...

The dropdown menu is dynamically populated based on the selection from another dropdown menu, with options retrieved from

Apologies if this has been addressed previously, but the existing solutions do not seem to work for me. I have 5 dropdowns: Brand, Model, Color, Engine No., and Chassis No. My query pertains to how I can link the dropdown options for Model based on the sel ...

Issue with the functionality of Jquery scrolling through thumbnail images animation

I have encountered an issue related to the previous question that I posted here. After successfully implementing the provided solution, it initially seemed to be working. However, when I clicked the next button and reached the 3rd click, the jQuery scrolli ...

When using the ngFor directive, the select tag with ngModel does not correctly select options based on the specified

Issue with select dropdown not pre-selecting values in ngFor based on ngModel. Take a look at the relevant component and html code: testArr = [ { id : '1', value: 'one' }, { id : '2', ...

Add a square div in every direction around the existing content in an HTML file

Begin by locating square number 1. Once you press the + symbol above square 1, square 2 will appear. From there, you can click the + on the right side of square 2 to reveal square 3. Is it possible to achieve this sequence? If so, what is the best way to ...

Trouble aligning items in a fieldset with Bootstrap

While working on a wire frame, I am attempting to create the HTML structure based on it. The required structure that needs to be built is outlined in this diagram: https://i.sstatic.net/ypp2f.png Progress has been made on aligning elements using a two-col ...

Retrieve the text content and identification value from each list item

I've found myself in a frustrating situation where I have an unordered list structured like this: var liList = $("#first").find("li"); var append = ""; for(var i =0; i< liList.length; i++){ var item = $(liList); append += "<option value ...

Avoid using jQuery when implementing a new form

Consider a scenario where you have an input field: <input type="text" id="smth" value="" /> and you are using jQuery to send this data to a .php file. $("#submit_button").click(function() { var info = {}; info['smth'] = $(& ...

Guidelines for positioning an object to float in the bottom right of a separate tag

I am trying to position an image at the bottom right of a parent div. The CSS solution I found from another answer did not work as expected, so I had to use JavaScript to achieve the desired result. Is there a way to do this without using JavaScript? (Pl ...

How to make a div disappear when hovered using Tailwind CSS

I need help with my code that is not working as expected. I have a set of images displayed as cards, each with text below them. I am trying to hide the text and only show the image using Tailwind v2, but I can't seem to get it right. Here's my co ...

Ways to decrease font size and insert a line break within a constrained input space?

I am facing an issue where the input box remains static with old numbers when it overflows, and newly typed numbers do not appear at all. <!DOCTYPE html> <html> <body> <input type="text" id="output-area" placehold ...

Tips for concealing a product item when the price is listed as 0

I am facing an issue where some of my products have a price of 0. In order to address this problem, I would like to hide those products from the collection pages. My question is: How can I hide the .productItem or .ItemOrj if the .productPrice span is eq ...

Why is it that styling <div> and <img> with a URL doesn't seem to work, even when applying the same styles?

In the example I have, I apply the same styling to an image and a div. Interestingly, the styling on the div makes the image look significantly better, while on the image itself it appears distorted. What could be causing this discrepancy? Both elements a ...

Continue extending the footer as the screen size decreases

Could anyone offer some assistance? I'm currently working on a project and facing issues with getting the footer to always be pushed down as the screen size decreases. As of now, my content is going under the footer instead. Any help would be greatly ...

Ensure that the dropdown menu remains visible even after the mouse no longer hovers over it

Looking to create a main menu with dropdown items that appear when the user hovers over them? You may have noticed that typically, the dropdown disappears once the hover event is lost. But what if you want the menu to stay visible and only disappear upon c ...

It is not permitted to incorporate the navbar.html file into any other modules

As someone new to web development, I have been facing challenges while working with Django This is the code for my project's modules. {% include 'navbar.html' %} <h1>projects template</h1> <p>Lorem Ipsum is simply dummy ...

Space in the middle of a body and a div

After extensively searching for a solution to the issue plaguing my website, I found that there was always an annoying gap at the top of the page. Despite trying various solutions, none seemed to work. Upon inspecting the website in Firefox, I discovered t ...

How do I create a clean HTML file when using the email editor with TinyMCE?

I was able to develop my own email editor, inspired by this particular example. To enhance user experience, I included a download button at the end of the file so that users can easily retrieve their edited content. The issue I'm facing is that tinym ...

I am experiencing issues with my JavaScript not functioning properly in conjunction with my HTML and CSS. I am uncertain about the root cause of the problem (The console is displaying an error message:

I am facing challenges in creating a content slider and encountering issues with its functionality. Specifically, when testing locally, I noticed that the current-slide fades out and back in upon clicking the arrows left or right, but the slide content is ...