Transicion de opacidad css

[Gorgonzola]

Tengo una imagen sobre la que al hacer hover se muestra sobre ella el titulo y un fondo negro semitransparente.

Lo que quiero es que esa transición dure 0.5 segundos. Se que es algo con la propiedad webkit pero no logro hacer que funcione. Aquí dejo el código:

Código HTML:

<div class="contenedorproyectos">
    <?php query_posts("paged=$paged"); ?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <div class="proyecto">
      <div class="miniatura"> <a href="<?php the_permalink();?>">
        <?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'list_articles_thumbs' ); } ?>
        <div class="contenedortitulominiatura">
          <div class="titulominiatura">
            <p>
              <?php the_title();?>
            </p>
          </div>
        </div>
        </a> </div>
    </div>
    <?php endwhile; else: ?>
    <?php endif; ?>
    <div class="borrar"></div>
  </div> 

Código:

.contenedorproyectos {
	width: 100%;
	margin: 30px auto 70px auto;
	max-width: 960px;
	position: relative;
}
.proyecto {
	width: 32%;
	height: auto;
	float: left;
	margin: 0 2% 2% 0;
	background-color: #FFBEBF;
	position: relative;
	display: inline-block;
}
.proyecto .miniatura {
	position: relative;
	width: 100%;
	height: auto;
	display: block;
}
.proyecto .miniatura img {
	width: 100%;
	height: auto;
	display: block;
}
.proyecto .contenedortitulominiatura {
	position: absolute;
	background-color: rgba(0,0,0,0.75);
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: auto;
	height: auto;
	display:none;
}
.proyecto:hover .contenedortitulominiatura{
display : block;
}
.proyecto .contenedortitulominiatura .titulominiatura {
	top: 50%;
	-webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
	position: absolute;
	text-align: center;
	width: 100%;
	color:#ffffff;
	font-family: 'lato';
	font-size:14px;
	text-transform:uppercase;
}

[Gorgonzola]

Decir que ya lo solucioné con:

Código CSS:

.proyecto .contenedortitulominiatura {
    position: absolute;
    background-color: rgba(0,0,0,0.75);
    opacity: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    display: block;
}
.proyecto:hover .contenedortitulominiatura {
    display : block;
    background-color: rgba(0,0,0,0.75);
    -webkit-transition: opacity 0.5s;
    opacity: 100;
}
 

[Rafael]

-webkit-transition: opacity 0.5s;

Te falta la propiedad genérica sin el webkit.

transition: opacity: 0.5s

Y este transition debería venir en las propiedades sin el hover. En el hover sólamente pon lo que quieres que cambie.