Как сделать затемнённое изображение?

#outer-box { 
  width: 300px; 
  height: 194px; 
  display: block; 
  position: relative; 
} 
 
#outer-box img { 
  width: 300px; 
  height: auto; 
} 
 
#outer-box #inner-box { 
  background: #FD8698; 
  height: 100%; 
  width: 100%; 
  opacity: 0; 
  top: 0; 
  left: 0; 
  position: absolute; 
  padding: 0; 
  transition: opacity .5s; 
} 
 
#outer-box #inner-box p { 
  color: #fff; 
  line-height: 150px; 
  font-family: 'arial'; 
  text-align: center; 
} 
 
#outer-box:hover #inner-box { 
  opacity: .9; 
  transition: opacity .5s; 
}

<div id="outer-box"> 
  <img src="https://img.fonwall.ru/o/5y/eiffel-tower-paris-france-eyfeleva-bashnya-7n74.jpg" /> 
  <div id="inner-box"> 
    <p>Почему именно мы?</p> 
  </div> 
</div>