Is there a CSS Blend Mode alternative for Internet Explorer?

I've implemented the background-blend-mode on this element:

<a href="#" class="blend">
    <h3>Title</h3>
    <p>Content goes here</p>
</a>

It's all set up with a background-image url. When the element with class .blend is hovered over, the background changes to this:

.blend:hover {
    background-blend-mode:multiply;
    background-color: rgba(0,0,0,.6);
}

Everything works smoothly, except for IE (as expected). Are there any alternative methods I can try to make it work in IE? Perhaps a jQuery workaround or a specific prefix like -ms-?

javascriptjqueryhtmlcssinternet-explorer

Answer №1

While it may not be the most ideal solution, considering that IE and MS Edge do not support the background-blend-mode property (http://caniuse.com/#feat=css-backgroundblendmode), I have found a workaround by utilizing a :after class on the element. This allows me to manipulate the background color and opacity of the pseudo element.

Check out the DEMO:

https://codepen.io/nicekiwi/pen/PmZdMK

HTML:

<div class="blend"></div>

CSS:

.blend {
  background-image: url('http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg');
  background-repeat: no-repeat;
  background-attachment: cover;
  width: 200px;
  height: 200px;
  position: relative;
}

.blend:after {
  width: 100%;
  height: 100%;
  content: '';
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s; /* adding a touch of fanciness with the transition effect */
}

.blend:hover:after {
  opacity: 0.3;
}

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 variable process.env.CLIENT_ID is functioning correctly within a function, but does not work when declared as a global

Trying to implement oAuth for Google API Using .env file to hide sensitive variables with .gitignore Facing an issue when trying to define the CLIENT_ID variable globally CLIENT_ID = process.env.CLIENT_ID When I run and log the variable outside of a fun ...

javascriptnode.jsexpress

How to detect a disconnected socket in Node.js using websockets

Encountering an issue with my nodejs websocket server. Upon graceful termination of client connections, the onclose method is triggered for closed sockets where I conduct clean up tasks. However, when clients disconnect due to network issues, the onclose ...

node.jshtmlwebsocket

The youtube API does not play nice with Jquery when it comes to handling ajax errors

I've been working on retrieving video data and search result data from the YouTube API using jQuery, but I'm having trouble with error handling in my code. I encountered an issue where a malformed video ID resulted in an error when testing it in ...

ajaxjqueryyoutube-api

How can a modal box be used to showcase a form (basic PHP file)?

The current process involves loading a form in a new popup window, which is not ideal. After submitting the form, it closes the popup and opens another one to display the results. This method needs to be improved. Can someone suggest an easy way to show my ...

phpjqueryajaxformsmodal-dialog

footer extending beyond the previous div's boundaries

Struggling with frontend development and creating a layout in html, css3, and bootstrap 4? I've managed to incorporate a subtle animation in the background (https://codepen.io/mohaiman/pen/MQqMyo) but now facing issues with overlap when adding a foote ...

htmlcssbootstrap-4

Shifting image from center to corner as you scroll

Hello there, I'm new to this so please bear with me for any obvious mistakes, thank you :) My goal is to have an image move from the center of the screen to the corner of the screen as you start scrolling. I've made some progress on this, but I& ...

javascripthtmlcss

Encountering an issue when attempting to store image links in the database using PDO

One idea that I have is to create an image uploader system that sends the image to the 'upload' folder and saves the link to the database. I encountered errors in my 'images.php' file. Can anyone assist me with resolving these issues? ...

phphtmlajaxfile-uploadpdo

Show an item in a visual format of a list

Need help displaying a specific object: cars: { number': 1, 'overload': 1,'brand': {'0': {'porsche': [{'price': 10, 'id': 0}],'vw': [{'price': 20, 'id': 1}] ...

javascriptvue.js

Is it possible to execute the .push() method on an array a specific number of times without using a for loop?

Currently, I am tackling the "Move Zeroes" Leetcode challenge. The task requires moving all zeroes to the end of the array without altering the sequence of non-zero elements. My strategy involves iterating through the array, splicing out each zero encounte ...

javascriptarrays

Display method JSONized

Looking for guidance on improving code efficiency and best practices. In my current project, I am working with a JSON Array structured like this: [ { "Date": "2014-07-16", "DiscPoint": "Description 1", "DisBy": "Person 1" ...

htmlajaxjson

Making a Django template recognize the load tag when inheriting from a base template involves ensuring proper syntax and file

My current setup involves a file called base.html. {% load static from staticfiles %} <html> <title>COOL| {% block title %} Sometitle {% endblock %}</title> <body> <!--- BEGIN INSERT CONTENT FOR OTHER PAGE HERE--> ...

pythonhtmldjangotemplates

Breaking or wrapping lines in Visual Studio Code

While working in Visual Studio Code, I often encounter the issue of long lines extending beyond the screen edge instead of breaking and wrapping to the next line. This lack of text wrapping can be quite bothersome. I utilize a split-screen setup on my co ...

javascripthtmlvisual-studio-codeline

Learn how to smoothly scroll to the top of a div by clicking on a team name

CSS Code .hover-div { position:absolute; margin-top:-150px; visibility:hidden; transition:all 0.5s linear 0s; } .team_hover:hover + .hover-div { margin-top:0px; visibility:visible; } .hover-div:hover { margin-top:0px; visi ...

angularjscss

Exploring the power of nested loops within an AJAX call in Angular

I have been attempting to iterate through a variable, search for IDs, and then make an ajax call to retrieve the detailed content of the different IDs. In the Success function, I am trying to loop through the received content and extract the emails. While ...

javascriptajaxangularjs

Searching for the clicked tr element within a tbody using jQuery

Here is my customized HTML table layout <table> <thead> <tr> <td class="td20"><h3>Client Name</h3></td> <td class="td20"><h3>Details</h3></td> ...

javascriptjqueryhtml

What is the best approach to detect multiple .change() events on elements that are dynamically updated through AJAX interactions?

Here is my first question, and I will make sure to follow all the guidelines. In a PHP page, I have two select groups, with the second group initially disabled. The first select group is named "yearlist", while the second select group is named "makelist" ...

javascriptphpjquerysqlajax

Decomposing a Vuex module into distinct files with Nuxt: A step-by-step guide

In the official Nuxt documentation (here), it is mentioned that 'You can choose to divide a module file into separate files: state.js, actions.js, mutations.js, and getters.js'. While there are examples of breaking down the Vuex store at the roo ...

javascriptvue.jsvuexnuxt.js

Learning how to utilize various types of buttons in C# and ASP.NET with this

I was following this tutorial: I like everything the same except I want to make the following change: <section> <a rel="external" href="#button" id="button">&#xF011;</a> <span></span> </section> ...

c#jquerycssasp.net

Performing bulk operations on all selected rows in a table using Angular 6

Within my Angular 6 web application, there is a table with checkboxes in each row. My goal is to be able to perform bulk actions on the selected rows, such as deleting them. One approach I considered was adding an isSelected boolean property to the data m ...

angularhtmltypescript

Why is it that jQuery is not working in Internet Explorer but works fine in Firefox?

Below is the code for handling file upload onchange event: <input type='file' onchange="displayFilePath(this);" id="loadfile" /> This text field will display the full path of the uploaded file. <script type="text/javascript"> fun ...

jqueryhtml