0

I have a webpage with the whole page in style

<div class="w3-sand w3-grayscale w3-large">

How can I make the image xxx showing original color instead of w3-grayscale?

<img src="xxx">
  • it seems that you are following the w3schools tutorial? – Ashish sah Jan 22 '18 at 07:04
  • @Ashishsah yes I am –  Jan 22 '18 at 07:06
  • can you give me the link? – Ashish sah Jan 22 '18 at 07:06
  • https://stackoverflow.com/questions/15901030/reset-remove-css-styles-for-element-only I think this could help – Nicolo Lüscher Jan 22 '18 at 07:08
  • @Ashishsah https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_cafe –  Jan 22 '18 at 07:09
  • @Bolphgolph I'm trying to put img into
    but it still is gray ...     –  Jan 22 '18 at 07:14
  • it should not come under the parent class @sean – Ashish sah Jan 22 '18 at 07:19
  • @Ashishsah but I don't want to change
    , how to make showing original color?
     –  Jan 22 '18 at 07:22
  • as mentioned in my answer . make a div outside of the parent class – Ashish sah Jan 22 '18 at 07:26
  • You have to use `position:absolute` that will be much complex..so just partition the div remove it outside from the parent – Ashish sah Jan 22 '18 at 07:29
  • @Ashishsah I still want the rest of page to be gray, all pictures are still gray, but just one picture showing original color –  Jan 22 '18 at 07:31
  • just make that out parent and adjust it. After that yiu can again wrap up the next content in greyscale class – Ashish sah Jan 22 '18 at 09:33
  • @Ashishsah the img is still gray even if I wrote for it filter: grayscale(0%); –  Jan 22 '18 at 16:23
  • @Ashishsah how to pull img out of div class? this img is within 5 layers of div class, I already give u the link of the source code. The reason why I say your answer is useless is because I'd rather someone tell me the technique to implement in order to make it work, not abstract concept such as pull it out. Sometimes it sounds easy, but I am handling code here. If your implementation works, it will be proved by itself to be useful. –  Jan 23 '18 at 03:22
  • wait you gave me the link of w3school not of your source code...and i have told you the concept that you need to pull it out from that div...you are a beginner that why you are thinking it is a Sisyphean task...but it is dam easy – Ashish sah Jan 23 '18 at 04:23
  • we are just making the comment section long...ashishsah1000@gmail.com reach me out in mail with your problem i can surely guide you – Ashish sah Jan 23 '18 at 04:29
  • @Ashishsah in the code where you find this
    , which gives the rest of page a gray effect. 6 lines after it, you probably see this text: "The Cafe was founded ...", all I'm doing is to add before this text, without any gray effect to the img itself. Hope I make the point clear this time.
     –  Jan 23 '18 at 04:40
  • 1
    @Ashishsah I found the solution. Your method cannot make sure the whole page is using the same format because once you break it in the middle, it messes up things. –  Mar 01 '18 at 05:15

1 Answers1

1

I think you are a beginner: W3Schools have their own stylesheet, Let me explain you are the style here in the classes of w3-sand,w3-large,w3-greyscale

.w3-sand, .w3-hover-sand:hover {
    color: #000!important;
    background-color: #fdf5e6!important;
}

.w3-large {
    font-size: 18px!important;
}
.w3-greyscale, .w3-grayscale {
    filter: grayscale(75%); /* this is the line of code applying the filter */
}

so these are the style of the specific classes mentioned there... To remove the image from the greyscalse you can use remove it from the parent or you can remove the greyscalsestyle from the parent div. As it is the one who is applying the effect on the child element. So just break down your code or remove the style from the parent element.

Ashish sah
  • 755
  • 9
  • 17
  • Your answer is useless because I need to only make one img inside the class not grayscale, but everything else is grayscale –  Jan 22 '18 at 16:28
  • I have told you the ans you have to pull it out from the parent...thats only the solution... enclose the div before the image and then put the image...and then you can again start your greyscale div – Ashish sah Jan 23 '18 at 02:54
  • Or learn to use `position: absolute;` thats only the solution else – Ashish sah Jan 23 '18 at 02:55
  • My ans is usefull because i explained what you have to do...that is only the solution else you would have got the ans till now on this big community – Ashish sah Jan 23 '18 at 02:56
  • give me your mail i am sending you my way – Ashish sah Jan 23 '18 at 05:43
  • leave it...i hope this solves your problem...I have replaced the images with a single image – Ashish sah Jan 23 '18 at 05:43
  • https://jsbin.com/qopicitocu/edit?html,output @Sean have a look that what i said – Ashish sah Jan 23 '18 at 05:44
  • I don't think this make the new img fit properly into existing style. If you change the img to 100px wide, you will find that it has its own background, it is sitting on its own line. The img is supposed to be small, and positioned in front of the text naturally, which means it fits into existing style. If you drag the img out of existing div, it looks like breaking existing style. –  Jan 23 '18 at 06:17
  • simple in one line...you are saying that i will not have my parents characteristics...and that never possible...if you feel that background is diffrent give it a same color...that's how it works...else you can never get what you want...child will inherit the parent characteristics – Ashish sah Jan 23 '18 at 06:31