Затемнение при наведение на блок css

Всё актуальнее стало использование красивых эффектов при наведение. Ниже приведен пример простой реализации с помощью html+css.

Должно получиться что-то подобное, справа:

HTML текст

<div class="wrapper-blockhome">
<div class="block2">
<a href="https://agrarnik.info/2018/11/">
<img class="img-responsive cover-home" src="img/cover.png" alt="new-number">
</a>
<div class="block2-bg">
<a href="https://agrarnik.info/2018/11/">
<img class="img-search" src="img/active-search-symbol.png" alt="иконка поиска">
</a>
</div>
</div>
</div>

CSS стили

.wrapper-blockhome {
margin-top: -197px;
margin-left: 100px;
position: relative;
width: 300px;
height: 491px;

}
.block2 {
position: absolute;
left: 0;
bottom: 0;
right: 0;
top: 0;

}

.cover-home {
width: 320px;
border: 1px solid #787878;
box-shadow: 5px 9px rgba(0,0,0,.2);
display: block;

}

.block2-bg {
position: absolute;
left: 0;
bottom: 0;
right: 0;
top: 0;
display: none;

}
.img-search {
width: 40%;
opacity: 0;
display: block;
margin: 200px auto;

}
.wrapper-blockhome:hover .block2 {
background-color: rgba(0,0,0,.8);
transition: all 1s;

}
.wrapper-blockhome:hover .block2-bg {
display: block;

}
.wrapper-blockhome .block2:hover .cover-home {
opacity: 0.5;
transition: all 1s;

}
.wrapper-blockhome .block2:hover .img-search {
opacity: 0.7;
transition: all 2s;

}