Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 623
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

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