How to blend out a image?
I'm trying to achieve something like this with a photo. What's the best way to try this? https://i.pinimg.com/originals/f5/04/9d/f5049d576c1c03cc1ce79fe8ff835b37.jpg
10 Replies
Overlay a gradient on top
other option is to use a mask gradient, but for that the image needs to be in its own container, otherwise it will also mask out the content. depends a bit of what kind of effect you want
here 2 example: 1 on the image itself and 1 as a background
https://codepen.io/MarkBoots/pen/NWJoONj
no idea. but @NZAA can you post the source for that design? did you find it on figma, dribble, behance, etc? I wanna know where I can find the full design.
You can set both an image and a gradient for the background of the same element. This avoids the need for any extra element or pseudoelement. https://codepen.io/chooking/pen/ZEPPJOO
That works, but I prefer a pseudo-element if you need to go that route (or you can do the mask like Mark posted). As much as possible, it's usually better if images are in the HTML, rather than CSS, since they are part of the content, and it makes it more accessible
But it's background and not foreground. Are you implying that no background images should be used for anything? I assumed that this would have been a background image even if the fade out effect wasn't being used.
If the image has any meaning to the content it should be an image element, if for instance you had a paper texture that could be a background (you wouldn't just have the paper texture there on its own if you removed all styles), but in the image provided in the OP that image has meaning it is showing the location, it's visually used as a background but it isn't a background.
How you used it in your pen is different, you used it purely as a background with no clear relation to the text, the same way that a paper texture might be used - as such the solution while looking like it fits is actually for a different problem.
Think about how websites would look with all styles removed, would you want to see that image there?
(it's always useful to consider what is seen if you remove all styles as it will make subtle layout errors far more obvious, more than just whether the image is important or a decoration)
What z- said, basically π
if an image can have an empty
alt="", then it's fine if it's a background-image. Anytime it adds context (and so you'd want to be using alt text), then, if you can, it's better that it's an actual image in the HTMLThat is a far better way to explain it