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;
}