Показать тень на фото

Question

Я пытался сделать что-то похожее на эту фотографию (относительно тени на картинка внизу). Photo with Shadow

Это то, что получили до сих пор:

<style> 
 
    h2.header { 
 
    bottom: 0; 
 
    position: absolute; 
 
    text-align: center; 
 
    width: 100%; 
 
    } 
 
    .wrapper { 
 
     display: inline-block; 
 
     margin-top: 25px; 
 
     position: relative; 
 
    } 
 

 
    .wrapper img { 
 
    display: block; 
 
    max-width:100%; 
 
    } 
 

 
    .wrapper .overlay { 
 
    position: absolute; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    height:100%; 
 
    background-color: rgba(0,0,0,0.25); 
 
    color:white; 
 
    } 
 
    </style> 
 

 
    <div class="wrapper"> 
 
    <img src="http://www.kavoir.com/img/text-over-image.jpg" alt="" /> 
 
    <div class="overlay"> 
 
    <h2 class="header">Restaurant Stowaway Devours $800 of Roast Goose and Wine</h2> 
 

 
    </div> 
 
    </div>

Answer 1

Вы можете позволить DIV с изображением в качестве фона, то пусть объект градиента внутри него.

body { 
 
    width: 100% 
 
    height: 100vh; 
 
    margin: 0px; 
 
    overflow: hidden; 
 
} 
 

 
#image { 
 
    width: 660px; 
 
    height: 200px; 
 
    position: relative; 
 
    background: url('http://i.imgur.com/HNj6tRD.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
} 
 

 
#grad { 
 
    width: 660px; 
 
    height: 200px; 
 
    background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)); /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)); /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)); /* For Firefox 3.6 to 15 */ 
 
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)); /* Standard syntax (must be last) */ 
 
}

<div id="image" alt=image><div id=grad></div></div>