Struggling to overlay a svg logo onto a video clip (mp4) using mix-blend-mode: difference in Shopware 6.
Here is my CSS:
#gr-logo svg path { mix-blend-mode: difference; }I've attempted with png files, applied blend modes to containers, and more. Interestingly, the same technique worked fine with text.
The issue persists when viewing at 991px or smaller size. Check it out here:
Any suggestions on why this isn't working as expected?
Thank you, Tom
To achieve the desired effect, remember that the element with the position: fixed rule should also have the mix-blend-mode rule applied. For more detailed information on how stacking context affects blend modes, check out this answer.
In your specific case, you can confirm this by implementing the following rules:
header.header-main {
mix-blend-mode: difference;
}
header.header-main * {
color: white!important;
fill: white!important;
}
As an example, notice the wildcard rule that sets all child elements to white in order to make them appear black against the background when using the difference blend mode. Make sure to adjust the rules accordingly to set the color as pure white.
My challenge is getting my div elements to float correctly in Internet Explorer. They are displaying perfectly in Chrome and Firefox, but IE seems to be messing up the code. The jsfiddle link showcasing the issue can be found here: http://jsfiddle.net/vlya ...
For a demonstration, please check out this jsfiddle: jsfiddle.net/rflfn/uS4jd/ Here is another attempt: jsfiddle.net/rflfn/T3ZT6/ I am utilizing SMOF to build a Wordpress theme. I need to create a function that changes certain values when a link is click ...
I have implemented a controller in my application that utilizes a custom layout named "special": class SessionsController < ApplicationController layout "special" ... end To complement this, I have created a new layouts/special.html.erb file: < ...
My website consists of two pages. The home page features a one-page navigation system where clicking on 'about' scrolls down to the corresponding section within the same page. PART 1 - On index.html However, when clicking on the 'blog&apo ...
I have included an SVG of a lamp that I designed using Sketch as a demonstration. My intention is for the lamp head to enlarge by a factor (e.g., 1.2 in this case) when the cursor hovers over it - indicating interactivity. However, the issue arises when ho ...
Having trouble with the spacing in my latest markup update. Here's what I have: <div class="row"> <div class="col-md-12"> <div class="form-group"> <label class="control-la ...
I am faced with the challenge of creating a transition effect for an overlay color when a button is clicked using Vue. Currently, the overlay appears abruptly, but I would like it to smoothly transition from a darker shade to a lighter one. As a newcomer t ...
My attempt at creating a custom toggle button using an HTML input checkbox and custom CSS has resulted in a misalignment between the text and the toggle button itself. Despite my efforts to adjust margins, padding, and heights, I have been unable to resolv ...
An accordion is located inside a div and a search box has been added to the div with the intention of serving as a search filter. Some accordion elements are visible within the div while others are hidden. The problem arises when trying to make the filter ...
Recently, I've been working on a JS project inspired by a short story from my high school days. The story featured robot crabs living on a small island, and I wanted to create a simulator where players could set the initial parameters and watch as the ...
It may seem like a strange question, but I'm experiencing an issue with an AJAX call to a JSON file. Both the request and response headers do not indicate to not use cache, and in the browser settings, the Disable cache option is not checked. What mor ...
I've been trying to figure out how to make a link show and hide a paragraph below it for some time now. I want to do this using just CSS. The paragraph should be hidden by default, then display when the link is clicked, and hide again with another cl ...
I've been searching and experimenting for hours, but I can't seem to make it work. In my "inline-form," I have a button on the left, an input field in the middle, and a button on the right within a navbar. Everything displays correctly when the ...
I need some help figuring out how to change the font color on my website when someone clicks a button. I already have the background functionality working, but I can't seem to get the text color to change. This is the code I have so far: <div cl ...
I have implemented a slideshow, and successfully managed to display the description in yellow as desired. However, I am facing an issue where the title (H2) above the description is not visible unless hovered over. Here is the current CSS I am using: .sl ...
We recently came across a part of our grunt file that was written by a former colleague. While the code functions correctly, the specific purpose of one segment remains a mystery to us! Here is the enigmatic code snippet: dist: { files: [{ ex ...
I recently created a navigation bar using some online tutorials, and everything seems to be working fine except for the drop-down menu. I've been struggling with it for hours and can't seem to find a solution. Any help would be greatly appreciate ...
There is a wrapper containing multiple boxes generated using ng-repeat from a list. The wrapper has a fixed height of 300px. If the list contains only one box, a class is added to fill the entire space of the wrapper. However, when there are more than on ...
I have gone through all the previous discussions, but I am still unable to solve this issue. When I hover over a button with the cursor set to pointer, it does not work as expected. Additionally, the hover effect is also not functioning properly. I have in ...
I need help with modifying a code that collapses/expands an HTML area when clicked. The default setting is currently closed. How can I change it to either open or closed by default? http://jsfiddle.net/8ZCXU/5/ ...