CODEWITHSUNDEEP
htmlcss
Ruhul Mashbu
Ruhul Mashbu

Reputation: 83

Image Grayscale CSS Effect

I want to reduce the brightness of my image with CSS.

I'm using Mozilla Firefox and this is my code:

-moz-filter: brightness(0.5);
filter: brightness(0.5);

Why is it not taking effect?

Upvotes: 0

Views: 194

Answers (2)

n4gys4nyi
n4gys4nyi

Reputation: 933

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    -moz-filter: brightness(100%);
    filter: grayscale(100%);
}

img:hover {
    -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
    -moz-filter: brightness(50%);
    filter: grayscale(50%);
}

Upvotes: 1

Igor Ivancha
Igor Ivancha

Reputation: 3451

img {
  -webkit-filter: brightness(100%);
  -moz-filter: brightness(100%);
  filter: brightness(100%);
}
img:hover {
  -webkit-filter: brightness(50%);
  -moz-filter: brightness(50%);
  filter: brightness(50%);
}

It's all you need! I checked in Firefox and Chrome, code is working
jsfiddle-link

Upvotes: 1

Related Questions