Как сделать затенение бекграунда?
Решение - ссылка
Принцип такой:.text {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 200%;
  background-image: url(http://womanwiki.ru/s/images/thumb/c/c5/Fitonyashka2.jpg/300px-Fitonyashka2.jpg);
  color: transparent;
}
.text:hover {
  background-image: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url(http://womanwiki.ru/s/images/thumb/c/c5/Fitonyashka2.jpg/300px-Fitonyashka2.jpg);
  color: white;
}<div class="text">
  Lorem ipsum
</div>