Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 631
  • Last Modified:

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?
0
mmalik15
Asked:
mmalik15
  • 5
  • 2
1 Solution
 
COBOLdinosaurCommented:
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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best 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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now