¿Cómo puedo agregar una buena superposición como la de la siguiente imagen?

Considere el siguiente HTML, ¿cómo agregaría una superposición como esa? Sé que puedo usar un degradado encima de él, y aplicarlo en diagonal, pero ¿puedo curvarlo también?

<div class="photostrip">
  <div class="overlay" />
  <img src="http://i.imgur.com/a21tM.jpg" />
  <img src="http://i.imgur.com/a21tM.jpg" />
  <img src="http://i.imgur.com/a21tM.jpg" />
</div>

Aquí hay algo que he probado (He sobresaturado la superposición para que se vea fácilmente), pero no es exactamente la forma que estoy buscando.

body { background-color: #4b74db; }

.photostrip {
  margin: 0 auto;
  width: 185px;
  background-color: #000;  
  box-shadow: 0px 3px 7px 3px #333;
  padding: 7px;
  padding-bottom: 2px;
  position: relative;

  .overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    border-bottom-right-radius: 200px 403px;
    /* This adds the nice overlay. */
  background: -webkit-linear-gradient(top, rgba(255,255,255,0.60) 0%,rgba(255,255,255,0.05) 100%);
  }


  img {
    display: block;    
    width: 175px;
    height: 120px;
    margin: 0 auto;
    margin-top: 6px;
    margin-bottom: 11px;
  }
}