Solved

how to grey out the images using css

Posted on 2013-01-10
7
585 Views
Last Modified: 2013-01-11
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
Comment
Question by:mmalik15
  • 5
  • 2
7 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 38764813
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
 

Author Comment

by:mmalik15
ID: 38764889
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
 

Author Comment

by:mmalik15
ID: 38764908
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:mmalik15
ID: 38765166
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38767601
Probably:

li:hover div h4 {color:red;}

Cd&
0
 

Author Comment

by:mmalik15
ID: 38767622
sorry does not work
0
 

Author Comment

by:mmalik15
ID: 38767721
#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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now