Gray out image with CSS?
Does it have to be gray? You could just set the opacity of the image lower (to dull it). Alternatively, you could create a <div>
overlay and set that to be gray (change the alpha to get the effect).
html:
<div id="wrapper">
<img id="myImage" src="something.jpg" />
</div>css:
#myImage {
opacity: 0.4;
filter: alpha(opacity=40); /* msie */
}
/* or */
#wrapper {
opacity: 0.4;
filter: alpha(opacity=40); /* msie */
background-color: #000;
}
Gray out a section of an image with CSS
Pure CSS Solution with no extra markup
JSFIDDLE DEMO
HTML
<div class="image-container">
<img class="image-grey" src="http://placekitten.com/200/150" />
</div>
CSS
.image-container {
position:relative;
display:inline-block;
}
.image-grey {
display:block;
-webkit-filter: grayscale(100%);
}
.image-container:after {
position:absolute;
content:"";
top:0;
left:50%;
width:50%;
height:100%;
background-image:url(http://placekitten.com/200/150);
background-position:top right;
}
Gray out part of image
you could play with a pseudoelement and a RGBA
background, e.g.
#mydiv {
background: url(http://www.psdgraphics.com/file/cherry-wood.jpg);
width: 250px;
height: 400px;
position: relative;
}
#mydiv:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 30%;
background: rgba(255,255,255, .3);
}
Codepen: http://codepen.io/anon/pen/OyVYwe
Or you could simply add a transparent left border to the element, e.g.
box-sizing: border-box;
background-origin: border-box;
border-left: 50px rgba(255,255,255, .3) solid;
Codepen: http://codepen.io/anon/pen/ZbGNqL
Or you could use an inset box-shadow
box-shadow: 80px 0 0 0px rgba(255, 255, 255, .2) inset;
Codepen: http://codepen.io/anon/pen/avOrXE
jQuery to gray-out images
If you want to gray-out an image, you can use the grayscale
filter. Here's an example using JQuery. Because the filter is part of a class, you can set the class on any number of images (like the ones that you no longer want the user to select).
$(document).ready(function() {
let myButton = $('#myButton');
let myImage = $('#myImage');
myButton.on('click', function() {
if (myImage.hasClass('inactive'))
{
myImage.removeClass('inactive');
myButton.attr('value', 'Disable image');
}
else
{
myImage.addClass('inactive');
myButton.attr('value', 'Enable image');
}
});
});
img.inactive {
filter: grayscale(100);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="myImage" alt="Alexander the Great" width=100 src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Alexander_the_Great%2C_from_Alexandria%2C_Egypt%2C_3rd_cent._BCE%2C_Ny_Carlsberg_Glyptotek%2C_Copenhagen_%285%29_%2836375553176%29.jpg/800px-Alexander_the_Great%2C_from_Alexandria%2C_Egypt%2C_3rd_cent._BCE%2C_Ny_Carlsberg_Glyptotek%2C_Copenhagen_%285%29_%2836375553176%29.jpg">
<br>
<input id="myButton" type="button" value="Disable image">
How to completely gray out an image with css?
It sounds like you are trying to change the actual pixels in an image. I believe what you are looking for is something like.
Pixastic (coloradjust)
https://github.com/jseidelin/pixastic
http://www.pixastic.com/lib/docs/actions/coloradjust/
or PaintbrushJS (colour tint)
https://github.com/mezzoblue/PaintbrushJS
http://mezzoblue.github.com/PaintbrushJS/demo/
How to grey out a box in CSS
Create another div that sits on top of #message-box with an opacity of say, 50% and a background-color of gray. When you need to, just show this overlay div. A demo is forthcoming.
Here's a nice demo to show you what I'm talking about. This approach also has the benefit (if, as I assume, you're attempting to 'disable' the message div) of prevent any clicks from reaching the div below it, which effectively disables the below div.
$(document).ready(function() { $("#myDiv").click(function() { $("#overlay").show(); });});
#myDiv { width: 100px; height: 100px; background-color: yellow; margin: 50px 50px; padding: 10px;}
#overlay { display: none; position: absolute; width: 100px; height: 100px; background-color: gray; top: 50px; left: 50px; padding: 10px; opacity: .8;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="myDiv"> <p>Some text</p> <input type="button" value="A button" /></div>
<div id="overlay"></div>
Related Topics
Apply CSS Style to Child Elements
CSS to Make Bootstrap Navbar Transparent
Tint Image Using CSS Without Overlay
Image Moves on Hover When Changing Filter in Chrome
<A> with an Inner <Span> Not Triggering :Active State in Ie 8
Google Webfonts Render Choppy in Chrome on Windows
Sass/Compass - Convert Hex, Rgb, or Named Color to Rgba
CSS Which Takes Precedence, Inline or the Class
Ie Crossing Out Pseudo Element CSS
Use Custom Fonts with Wkhtmltopdf
Less CSS Set Variables in Media Query
IE9 + Richfaces Rendering Problem
Chrome Device Mode Emulation Media Queries Not Working
How to Get a React Component's Size (Height/Width) Before Render