<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
.main {
background: url('image.jpg');
height: 500px;
width:500px;
}
h2 {
margin:0;
color: white;
}
.dark{
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
}
</style>
</head>
<body>
<div class="main">
<div><h2>Текст</h2>
<div class="dark"></div></div>
</div>
</body>
</html>
.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>