Personally I would try to stay away from designs that rely on hover states as it causes problems with touch device as you have mentioned. You can check for touch support in JavaScript but there are devices out there which fall in to both the category of touch device and what some people may call as a desktop device (Microsoft Surface being an example). These typically would be detected as a touch device so you have to consider this.
If you still want to go this route, check out the touch support feature detection in Modernizer (
http://modernizr.com/) and take the code out of that or just simply use the library. I'm not a fan of using a libraries willy nilly so I'd go with the copy and paste route personally (that's what I've done before).
The feature detection could then be used to apply a class to the dom (Modernizer will do this for you) which you could use to style the page differently.
Looking at your site, you don't actually need to load a separate image on hover. You could just apply a layer over the top with some transparency and then show the text on hover instead. You would end up with something like this in css.
Code:
.image-container {
position: relative;
}
.image-container:hover:before,
.has-touch .image-container:before
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background-color: rgba(0, 0, 0, 0.5);
}
.image-container .title {
display: none;
}
.image-container:hover .title,
.has-touch .image-container .title{
display: block;
}
The .has-touch class would be the one added with feature detection. You can also chose not to use a pseudo element for the transparent layer if you prefer, but that would mean the addition of a unsemantic element to your markup then.
EDIT: Here's a jfiddle of the transparency layer
http://jsfiddle.net/FUkSb/. I've not positioned the header but I'm sure that can be sorted. I also couldn't get the pseudo element to work so I did something a little different (not sure why it doesn't so perhaps have a look at it).
EDIT EDIT: I've just realised the image is grey scaled on hover instead.
Try using the css3 greyscale filter applied to the image instead of the overlay method.
