how to grey out the images using css

on this webpage http://nkarch.lifeintheuktest.co/the-work.aspx how can we grey out the images using css and show  the actual images on hover?
mmalik15Asked:
Who is Participating?
 
COBOLdinosaurConnect With a Mentor Commented:
Well you should probably start by fixing the 18 validation errors so the images will display correctly.  Then you can use opacity to dim them down.  However there will be cross browser issues.

Cd&
0
 
mmalik15Author Commented:
thanks for the comment. I will fix the validation error.

I have tried opacity but what if I want to make the image black and white?
0
 
mmalik15Author Commented:
i m trying this but its only working in IE


#ProjectsGrid img
{

filter: gray;
}

#ProjectsGrid img:hover
{

opacity:1.0;
filter:alpha(opacity=100);
}
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
mmalik15Author Commented:
i have fixed the black and white issue. Can I ask one last thing ( i know its not related to this question) as i m struggling with this one for last hour or so, on hover of li element, project  the image is changing fine but i want the h4 heading to turn red as well but its not. Any ideas
0
 
COBOLdinosaurCommented:
Probably:

li:hover div h4 {color:red;}

Cd&
0
 
mmalik15Author Commented:
sorry does not work
0
 
mmalik15Author Commented:
#ProjectsGrid ul li:hover h4
{
      cursor: pointer;
      opacity: 1; /* css standard */
      filter: alpha(opacity=100);
      background-color:#760602 !important;
      
}


the above css worked.
0
All Courses

From novice to tech pro — start learning today.