.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><div class="wrapper">
<div class="item"></div>
...
<div class="item"></div>
</div>.item {
min-height: 250px;
}
.item:nth-child(n+10) {
min-height: 30px;
}.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, minmax(250px, auto)) minmax(30px, auto);
}