Sombra sobre la imagen

[Naahuel]

¿Opacar la parte inferior en photoshop? Pésima idea. Más si se tratase de un sistema autoadiministrado, donde las imágenes son obtenidas de la base de datos.

Yo haría algo así:

Posible HTML:

Código HTML:

<div class="contenedor-imagen">
        <img src="http://placekitten.com/600/300" alt="" />
        <div class="epigrafe">
            <h2>Lorem Ipsum</h2>
            <p>Lorem ipsum dolor sit amet, ephesiorum quod non dum veniens indica enim materiam ad quia. </p>
        </div>
    </div>
 

Posible CSS:

Código CSS:

*{
        /* Pequeño reset - ignorar - */
        margin: 0;
        padding: 0;
    }
    
    .contenedor-imagen,
    .contenedor-imagen img{
        /* Tanto al contenedor como a la imagen
        le damos posición relative */
        position: relative;
        /* El z-index es para ubicar la imagen debajo del texto */
        z-index: 10;
        /* Las dimensiones son necesarias, para que nada salga de lugar */
        width: 600px;
        height: 300px;
    }
    .epigrafe{
        /* posicionamiento del epigrafe */
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        
        background: #000; /* fallback, para navegadores viejos */
        background: rgba(0,0,0,0.5); /* negro con 50% de transparencia */
        
        /* Estilos adicionales, para que quede bonito */
        font-family: Helvetica, sans-serif;
        color: #FFF;
        padding: 20px;
    }
    .epigrafe h2{
        font-family: Times New Roman, serif;
    }
    .epigrafe p{
        font-size: 12px;
    }
 

Fijate que el color de la caja es primero negro en HEXA y después con RGBA. Esto es porque no todos los navegadores soportan RGBA, entonces se quedan con el valor anterior en HEXA que es un negro sólido. Lo que podés hacer también es usar un pequeño PNG con transparencia alpha del 50% que se repita de fondo también, que funcionaría en más navegadores.

Demo: http://jsbin.com/adediq