Tumblr Theme y CSS Opacity

[jotaerrebe]

Tengo un problema con la propiedad opacity, estoy haciendo un theme de tumblr, y quiero que esta galería de imagenes tenga una opacidad de 0.5, pero que a su vez cada imagen tenga un background black, cosa que al momento de hacer hover se vea la imagen más oscura y no el fondo del sitio (que es una foto).

Les dejo los codigos, espero que me puedan ayudar! Gracias!


Css:


/*Contenidos Post
----------------------------------*/

#tumblr_controls{position:fixed !important; }


.entry {margin: 5px; {block:PermalinkPage} width: 550px; margin: 0px auto; {/block:PermalinkPage} {block:IndexPage}width: 300px; float: left;{/block:IndexPage}}



#photo {-webkit-transition-duration: .3s; background-color: #000000; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

#photo img {{block:PermalinkPage}width: 550px; border: 1px solid #2c2c31; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; {/block:PermalinkPage} {block:IndexPage}border: 1px solid #2c2c31; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; width: 300px; {/block:IndexPage} height: auto;}

{block:IndexPage}img:hover {-webkit-transition-duration: .5s; opacity: 0.5; /* for IE */ filter:alpha(opacity=50); }{/block:IndexPage}





Html:


{block:Posts}



{block:Text}
<div class="entry">
<div class="text">
{block:Title}<div class="post_title">{Title}</div>{/block:Title}{Body}
{block:IndexPage}{block:Date}<div style="display: block; text-align: right;"><a href="{Permalink}"><div class="permalink"><img src="http://static.tumblr.com/plngtrn/7Xslojw8l/heart.png"> {NoteCountwithLabel}</div></a></div>{/block:Date}{/block:IndexPage}
</div>
{block:IndexPage}{/block:IndexPage}
{block:Date}{block:PermalinkPage}<div style="display: block; text-align: right;"><div id="info_oth">
<div class="info">{NoteCountwithLabel} <img src="http://static.tumblr.com/plngtrn/7Xslojw8l/heart.png"></div>
<div class="info">{TimeAgo} <img src="http://www.freeiconsweb.com/Icons-show/glyphish-icons/11-clock.png"></div>
{block:HasTags}<div class="info">{block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags} <img src="http://www.freeiconsweb.com/Icons-show/glyphish-icons/14-tag.png"></div>{/block:HasTags}
</div></div>
{/block:PermalinkPage}{/block:Date}
</div>
{/block:Text}



<!--POST PHOTO-->

{block:Photo}
<div class="entry" id="photo">
{block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}{block:IndexPage}<a href="{Permalink}">{/block:IndexPage}<img src="{PhotoURL-500}" alt="{PhotoAlt}" width="550px"/>{block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}{block:IndexPage}</a>{/block:IndexPage}
{block:IndexPage}{/block:IndexPage}