I only had to change the width of images.

Thank you very much :)

After adding this CSS the width of posted images has changed and the darkening is a bit bigger (to the right and down). How can I fit it?

Hmm, try adding this:

.entry img {
	margin-bottom: 0;
}

Note that you should remove the #greybutton lines you added to Appearance → Custom Design → CSS. They're not formatted properly and are causing trouble. Also, using an extra class or ID probably could work to target the images, but it seems like a lot of extra work and I don't think they're needed if the only links in your posts are images that get the overlay treatment.

The finished solution looks nice so far!

I've also noticed that, as you mentioned it applies to all links.. so facebook and twitter links as well. Can I block this for those two links only?

Yep. Try making the original example I posted juuust a bit more specific, like this:

.entry p a {
	position: relative;
	float: left;
	cursor: pointer;
}

.entry p a:hover:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,0.5) url(http://s.wordpress.org/about/images/logos/wordpress-logo-stacked-rgb.png) center center no-repeat;
}

(Note that there's probably more than one way to do the same thing.) :)

I've put the following to css:
#greybutton
.entry a {
position:relative;
float:left;
cursor:pointer;
}

#greybutton
.entry a:hover:before {
content:"";
display:block;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,0.5) url('http://naszetrendy.files.wordpress.com/2012/08/button-3442.gif') center center no-repeat;
}

and have assigned class in 1st post: #greybutton.

..still it doesn't work. What do I do wrong?

That's amazing. Thank you very much!

Would you also know where I can adjust it?
After adding this CSS the width of posted images has changed and the darkening is a bit bigger (to the right and down). How can I fit it?

I've also noticed that, as you mentioned it applies to all links.. so facebook and twitter links as well. Can I block this for those two links only?

Thank you very much for all help :)

Paula, naszetrendy.wordpress.com

.entry a {
	position: relative;
	float: left;
	cursor: pointer;
}

.entry a:hover:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,0.5) url(http://s.wordpress.org/about/images/logos/wordpress-logo-stacked-rgb.png) center center no-repeat;
}

To change out the image in that example with a button, replace the url() value with your button image. Change the rgba() values to change the color (first 3 numbers) and the level of opacity (last number).

Note that this affects all links, not just images. So it works for your current setup, but it won't work if you add other content with links in any posts. If you wanted to limit to just certain links, you could add a class to those elements in the HTML and adjust the CSS a little. Also, note that if an image isn't linked, it won't work.

is it possible to customize css so that all images posted would become a bit darker when mouse is in the field of the image and add a button in the middle?

Thank you!