Gray out image with CSS?

by

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="https://stackoverflow.com/questions/286275/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;
}

More Related Contents:

  1. Could someone explain this CSS code?
  2. How do I hide an element when printing a web page?
  3. ::slotted CSS selector for nested children in shadowDOM slot
  4. Aligning grid items across the entire row/column (like flex items can)
  5. How can I force browsers to print background images in CSS?
  6. Is there any way to hover over one element and affect a different element? [duplicate]
  7. Is embedding background image data into CSS as Base64 good or bad practice?
  8. How to change an input button image using CSS
  9. Relationship between !important and CSS specificity
  10. Make a DIV fill an entire table cell
  11. Specify an SVG as a background image and ALSO style the SVG in CSS?
  12. Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
  13. Add a css class to a field in wtform
  14. What is this CSS selector? [class*=”span”]
  15. Borders not shown in Firefox with border-collapse on table, position: relative on tbody, or background-color on cell
  16. Make children divs the height of tallest child
  17. Remove “whitespace” between div element
  18. What does the double colon (::) mean in CSS?
  19. How to add fonts to create-react-app based projects?
  20. Is there an opposite CSS pseudo-class to :hover?
  21. Why isn’t my justify-content property working?
  22. CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
  23. “Eliminate render-blocking CSS in above-the-fold content”
  24. Remove border radius from Select tag in bootstrap 3
  25. Are there any cons to using color names in place of color codes in CSS?
  26. CSS width 100% OR max-width in pixels
  27. What is the difference between default, user and author style sheets?
  28. CSS – style a link based on its “rel” attribute?
  29. There is a 4px gap below canvas/video/audio elements in HTML5
  30. What is the difference between background-size: cover; and background-size: 100%;?

Leave a Comment