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
13
votes
5 answers

Move one image inside other image

Background I am allowing user to upload an image inside mask image.... Once user upload image, I am filling user uploaded image inside mask image : 1.Mask image : 2.user uploaded image : 3.User uploaded image on mask [Final image ] : Codepen :…
user8444404
10
votes
1 answer

Is it possible to animate a CSS mask-image?

I'd like to animate the "mask-position" property of a CSS mask image. The mask-image itself is a simple gradient, and my intended behavior is that by changing the value of the mask position, I can make the background object fade in from left to…
Ben Viatte
  • 485
  • 1
  • 5
  • 16
8
votes
2 answers

masking image with CSS

I made a design like this How to mask the background with css? I have tried code like this .img-poster { display: block; max-width: 100%; -webkit-mask-image: url(https://cdn.pbrd.co/images/GYiCod1.png),…
GerryofTrivia
  • 420
  • 4
  • 20
6
votes
1 answer

Mask Image, create rectangle from multiple gradients

I have a radial gradient that used as a mask-image "fades" an image in to the background-color behind the image. mask-image: radial-gradient(ellipse at center, rgba(255,255,255,1) 1%,rgba(255,255,255,1) 50%,rgba(255,255,255,0)…
John
  • 1
  • 13
  • 98
  • 177
5
votes
1 answer

Can you use a CSS sprite for webkit-mask-box-image (or clip it?)

I'm playing with the -webkit-mask-box-image css property.
This works great. I end up with a red element in the shape of the mask image. The…
DA.
  • 39,848
  • 49
  • 150
  • 213
5
votes
3 answers

Element's border missing after css mask-image

I have applied an svg as mask-image to certain divs. After doing that their border is gone. .icon { padding:5px; border:5px solid #000; width: 150px; height: 150px; display: inline-block; -webkit-mask:…
Sakis
  • 821
  • 7
  • 12
4
votes
1 answer

mask-size: 100% 100% does not stretch horizontally

I'm applying an SVG image mask to create a frame around and image like this: img { mask-repeat: no-repeat; mask-size: 100% 100%; mask-image: url('i/test-mask.svg'); } Expected result: The mask…
StudioAl
  • 192
  • 7
4
votes
1 answer

Applying mask to box-shadow

I have a div with a mask applied to it. I noticed that I can't apply a box-shadow on that same div, so I must move the shadow to a "wrapper" div. The problem is that if the shadow is placed on the shadow div, the mask is not applied to the…
alexandernst
  • 14,352
  • 22
  • 97
  • 197
4
votes
1 answer

Applying multiple mask-image to a single div

I can apply a mask-image at any place on a div I want, but can I apply more than one mask-image on the same div? Example with a single mask-image: div { width: 200px; height: 200px; background-color: green; border: 2px solid black; …
alexandernst
  • 14,352
  • 22
  • 97
  • 197
4
votes
2 answers

CSS: How to fade text from top and bottom?

I need to fade paragraph from both top and bottom. But am able to fade from only either of the side. HTML:

{content}

CSS: .bottom-overflow-fade { mask-image: linear-gradient(to bottom, black 80%,…
Vinay Sharma
  • 3,291
  • 4
  • 30
  • 66
4
votes
1 answer

How to apply a mask-image only on an element's background and not on its children?

I'm trying to apply a mask-image on the background of an element, but I don't want to mask its children. I've tried to change the z-index without any success. * { box-sizing: border-box; } body { margin: 0; background: #000; } .el { width:…
Marc Duluc
  • 51
  • 2
  • 5
4
votes
2 answers

Is there a method to ensure 100% faithful reproduction of a border-image in CSS or SVG?

Here my demo: https://codepen.io/joondoe/pen/MWwmGwG?editors=0100 In my example I am using CSS but I am open to solutions using SVG also. I have managed to create a border-image with filling content inside. Now I am wondering if it is possible to…
Webwoman
  • 10,196
  • 12
  • 43
  • 87
4
votes
2 answers

How to center video source in circle shape using css, html

I think this question has been asked for many times. And some of them work either on Chrome or on Firefox. I tried with the solution: .rc{ width: 250px; height: 250px; border-radius: 100%; -webkit-mask-image: -webkit-radial-gradient(circle,…
Pengzhi Zhou
  • 481
  • 1
  • 6
  • 24
3
votes
1 answer

Adding an outer gradient border or overlay shape to a circular image using CSS

I'm attempting to add an outer gradient border of three solid colors (Fig B) to an image (Fig A) using CSS, but am not having much luck with the methods I've tried thus far. The images will have border-radius: 50% to make them circular and the…
Mark Bosky
  • 129
  • 7
3
votes
2 answers

I can't frame this image inside an SVG

I want to wrap this inside to achive a result similar to (source: i.ibb.co) it is to say, the t-shirt should be cropped inside the cloud, following its path. I tried to use a CSS border mask, but I was not successful: .wrapper { …
Fran
  • 43
  • 3
1
2 3 4 5 6