WP Brightness or Opacity? – Darken greyscale thumbnail, roll over into colour

So there are lots of questions on here about doing rollovers from the normal image into a coloured/darkened image, but I’m actually trying to do the opposite. I want my thumbnails to start off as greyscale, darkened significantly, and in the roll over reveal the natural, full colour image.

My greyscale to colour hover is working fine. I’m just having issues darkening the image so I can actually see my post title. I don’t know anything about jQuery, but am “okay” with CSS.

Here’s the code I’m working with currently:

.post_home {width: 305px; height: 175px; float: left; margin: 0 0 25px 15px; visibility: visible; filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; /* IE5+ */ -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */}

.post_home:hover {filter: none; -webkit-filter: grayscale(0); filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");}

.thumb {display: block; width: 305px; height: 175px; position: relative; background-color: #000}

.thumb img {display: block; width: 305px; height: 175px; opacity: .4;}

.thumb img:hover {display: block; width: 305px; height: 175px; opacity: 1;}

I’m 99% this CSS is pretty heavy, too. I’m a print designer, not web, so if you see any fat I should trim down, feel free to say so.

This site has the same kind of effect I’m going for: Truf Creative