Zie foto: http://i62.tinypic.com/308e7sx.jpg

Ik heb een website waar automatisch restaurants worden ingeladen d.m.v. de database, wanneer iemand hier op klikt krijgt hij de info pagina van een restaurant te zien. Nu wil is restaurants die niet actief zijn een soort transparante witte laag geven, zo iets met tekst: http://i62.tinypic.com/t82fe8.jpg

Dit is de css voor de restaurants, kan iemand mij laten zien hoe ik een extra class kan maken die ik kan oproepen op het moment dat een restaurant niet actief is?:

#overzicht .companies {
margin: 22px 0 0 290px;
}
#overzicht .companies a.company {
display: block;
position: relative;
float: left;
width: 208px;
height: 112px;
margin: 0 0 6px 6px;
background-color: #FFF;
border: 1px solid #D7D7D7;
text-decoration: none;
}

In enkel CSS krijg je dit nooit goed werkend. Je zult dus gebruik moeten maken van php of nog makkelijker jquery:
http://jsfiddle.net/fiddleyetu/9ff79/

Hier is een active class toegepast op een menu.

Zet dit in je CSS en geef de DIV een extra class met de naam "fade"

.fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}


.fade:hover {
opacity: 0.5;
}

Verder zou je een extra div kunnen maken die de tekst erover heen plakt.

EDIT: als je wilt dat het al "faded" is zonder de hover zet dan dit in je CSS:

.fade {
opacity: 0.5;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}

De volgende kost je 40 euro ;)

Ik heb wat voor je in elkaar gezet, het is een full-css oplossing zonder extra html.

http://jsfiddle.net/aeGJB/

Met vriendelijke groet,
Daniel Warnaar