How to apply filter only for the given shape in CSS?

Question

I create my website and I wonder how to apply or disable filer on given shape. On whole image I want to have greyscale 98% and in this shape it should be 0%. Example is here:

Can somone told me what I have to use? I think there is something with :before,:after or clip.

Edit: (I know I shouldnt greyscale parent but I dont know how to do it another way)

<template>
    <v-parallax dark class="parallax" height="798">
        <v-row no-gutters align="center" justify="center">
            <v-col class="text-right" cols="12">
                <v-container>
                    <h1>This is my portfolio</h1>
                    <h4>Let me show you why you should hire me</h4>
                </v-container>
            </v-col>
        </v-row>
    </v-parallax>
</template>
<style scoped>
    .parallax{
    background-position: top;
    background-image: url("../assets/backgroundImage.jpg");
    background-size:cover;
    background-attachment: fixed;
    margin-left:-2px;
    filter: grayscale(98%);
}
.container{
    filter:grayscale(0%);

    color:#EEE;
    border:1px solid #EEE;
    background-color:rgba(0,0,0,0);
}

score 2 · Accepted Answer · answered Dec 16 '19 at 12:23

You can get the effect you want using mix-blend-mode that is applied to a large shadow that covers the whole document.
The trick is that box-shadow is not drawn behind the element, even when the element is transparent. We use an ::after pseud-element because we want the shadow and your title to have different blending modes.

I'm using gray shadow, mix-blend-mode: saturation;, and opacity, to get a similar effect to grayscale(98%).

Here's the example:

body {
  background:url(https://www.japan-guide.com/g19/3813_topc.jpg);
}

div {
  margin: 50px 40px;
  padding:20px;
  border:solid 1px silver;
  position:relative;
  color: white
}

div::after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  box-shadow:0 0 10px 10000px gray;
  mix-blend-mode: saturation;
  opacity:0.9;
}

<div>hello</div>

The effect is similar to this question: Apply blend mode to drop-shadow only

Fresh · Answer 2 · 2019-12-15T22:51:19.133

0

I don't really understand but it seems you want the selected shape in colour and the rest left greyscale as is.

If it was me I'd cut the shape out of your original image, upload, put a class within image tags, position:relative;. Size it then maneuver it to where you want it.

You could then give it transparency or whatever if that's what you want.

edited Dec 15 '19 at 22:51

answered Dec 15 '19 at 22:27

Fresh

51
8

Probably It won't work if we will scroll down because image in container will be static :/ – MrFisherman Dec 15 '19 at 22:29
If you put your class within the image tags then you can do what you want with it. – Fresh Dec 15 '19 at 22:39
Or you might be able to do something with this:https://stackoverflow.com/questions/1964297/split-div-into-2-columns-using-css – Fresh Dec 16 '19 at 01:21

score 0 · Answer 3 · answered Dec 15 '19 at 22:29

0

.typoIndex {
  width: 350px;
  height: 150px;
  position: absolute;
  font-family: Georgia, 'Times New Roman', Times, serif;
  background-color: rgba(0,0,0,0.4);
  text-align: left;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="">
  <title>Document</title>
</head>
<body>
  <div class="typoIndex">
    <img src="" alt="">
    <span id="">your text ...</span>
    <p> - your text etc can add image can do whatever :) - </p>
  </div>
</body>
</html>

Use rgba!

answered Dec 15 '19 at 22:29

danH

105
10

I don't know if you understand me well. I mean that we can't just set tranparent color for this div because parallax which is under it is grayscale so this div will be also grey and I want it to be in colour. That is the problem. – MrFisherman Dec 15 '19 at 22:33
Here you go I just added it :) – MrFisherman Dec 15 '19 at 23:02

How to apply filter only for the given shape in CSS?

3 Answers3