Денис Денисов

обнулите line-height

.image-wrapper {
line-height: 0;
}

https://jsfiddle.net/tc74031y/1/

Может кто наталкивался на хорошие статьи на тему, что бы ссылку дизайнеру кинуть или тыкнуть заказчика мордой в теорию.

В последнее время сам себя тыкаю в замечательную статью - UX/UI Best Practices: 125 Easy Tweaks to Optimize .... Там обо всем простыми словами и с примерами.

Надо добавить блоку #news
position:relative; z-index:1;
а картинке:

position: relative;
 z-index: -1;

Тыц

теперь css такой:

.clearfix:after{
  content:'';
  display:table;
  clear:both;
}
#news a{
  display:block;
}
#news {
  float: left;
  width: 100%;
  height: 300px;
  background: #3E3E3E;
  position: relative;
  z-index: 1;
}

#news article {
  width: 400px;
  height: 250px;
  margin: 15px;
  box-shadow: inset 0px 0px 20px 10px rgba(0,0,0,0.6);  /*Тень*/
}

#news article img {
  width: 400px;
  height: 250px;
  position: relative;
  z-index: -10;
}

#news article h1 {
  position: absolute;
  top: 190px;
  left: 15px;
  font-size: 1.1em;
  color: #FFF;
}