Stack Overflow
Stack Overflow

Questions tagged [css-mask]

The mask CSS property hides an element (partially or fully) by masking or clipping the image at specific points.

The effect of applying a mask to a graphical object is as if the graphical object will be painted onto the background through a mask, thus completely or partially masking out parts of the graphical object.

Reference: https://drafts.fxtf.org/css-masking-1/#masking

87 questions
0
votes
1 answer

How can I make a child div appear above a css mask in parent div

I've applied an svg mask to an mp4 video created using the Gutenberg cover block. The problem is that the wp-block-cover__inner-container text is also masked by the svg but needs to appear above it. I've tried to use the following answer to solve my…
Simon P
  • 3
  • 2
0
votes
1 answer

CSS mask and clip-path both obstruct other elements in on the page in Safari

I have a project where I need to use both clip-path and masks in order to get some sort of gradient coloring onto a div. I use the clip-path and mask to contain the colors within the borders of the div. This works fine in both Chrome and Firefox.…
Stephen
  • 913
  • 3
  • 24
  • 50
0
votes
1 answer

Adding a border to a mask image created with a radial gradient

I have a transparent radial gradient that I'm using as a mask image in order to "cut a hole with the shape of a half circle" in a div. I'm using a transparent radial gradient because I want the "hole" to be an actual "hole" (meaning, I want to be…
alexandernst
  • 14,352
  • 22
  • 97
  • 197
0
votes
1 answer

Creating an animated adjustment mask (blend mode)

The animation below was created in Adobe AE by simply moving images' masks with added red tints. I am trying to figure out how to achieve something similar in CSS/JS (is it even possible?). The tint itself could be handled by blend modes but moving…
Kacper
  • 19
  • 3
0
votes
2 answers

css property mask is not working properly for svg

Css property clip-path is work fine but mask or -webkit-mask is not working properly in this example. Please help me to solve this because my project is totally depended on masking image with svg file. In clip-path, i can't resize image in…
Jignesh Panchal
  • 1,037
  • 11
  • 29
0
votes
0 answers

Why does a masked-image ignore the z-index?

I have an image that I mask in CSS. I want a text above this masked-image. It seems that the z-index is ignored. I made a small example with my code to show the problem. To see that the z-order is depending on the mask you can hover the orange…
Tee
  • 1
0
votes
1 answer

mask-image and -webkit-mask-image not work in Firefox

.lighting { width: 100%; height: 100%; position: absolute; z-index: 8; opacity: 0.3; -webkit-mask-image: gradient(linear, left 50%, left 60%, from(rgba(0,0,0,1)), to(rgba(0,0,0,1))); mask-image: gradient(linear, left 50%, left 60%,…
Majonez.exe
  • 412
  • 8
  • 22
0
votes
0 answers

CSS Mask repeat only on time in X and Y axis

I want to use a mask in CSS to mask an element. But it repeats in entire of my element. I want only one mask in a specific position. This what I have right now: But I want something like this: For the record, I know there is a mask-repeat property…
Hossein Rahimi
  • 107
  • 1
  • 7
0
votes
0 answers

CSS image mask not showing in edge but works fine in Firefox and Chrome

I have a slider with an image mask which works fine in Firefox and Chrome (attached) The CSS for it is quite simple: position: absolute; bottom: -150px; width: 800px; left: 50%; transform: translateX(-50%); z-index: 5; -webkit-mask-image:…
David Robert
  • 11
  • 4
0
votes
3 answers

SVG not displaying properly on Android 4.x native browser

This what SVGs should look like And this is what SVGs look like on Android 4 native browser on a Samsum Galaxy S3 This is how they are embedded in the page .petal { -webkit-mask-image:url(../images/petal.svg); -webkit-mask-size: 100%; …
Titouan de Bailleul
  • 12,920
  • 11
  • 66
  • 121
0
votes
1 answer

How to detect when -webkit-mask-box-image has downloaded

I generate an mask image on a web server programmatically, then apply it to a HTML element with the following code: imageToMask.style["-webkit-mask-box-image"] = "url('" + featherURL +"') 100 stretch"; How can I find out when the image comes back…
Bryce
  • 6,440
  • 8
  • 40
  • 64
-1
votes
2 answers

Custom top border on div only at the top ot using mask

Hi i want effect like this on my div but only at the top: I know there is css mask property but it's really complicated to me. My solution is I created single circle svg and repeat it multiple times but i also need that left/right…
1haker
  • 124
  • 13
1 2 3 4 5
6