Как заставить не исчезать эффект hover у картинки при наведении курсора на кнопку внутри этой картинки?

Question

[Алексей Мирошниченко]

<div>
<img src="img/mask.jpg" class="mask">
<button class="viewDetails" id="vbtn1"> View details</button>
</div>

.viewDetails{
  position: absolute;
  z-index: -1;
}
.mask{
  opacity: 0;
}
.mask:hover + .viewDetails {
  z-index: 1;
}
.viewDetails:hover{
  z-index: 1;
}
.mask:hover {
  opacity:0.7;
}

При наведении курсора на картинку она становится полупрозрачной, в центре картинки есть кнопка, и когда курсор попадает на эту кнопку то эффект полупрозрачности у картинки пропадает. Как сделать так, что бы при наведении курсора на кнопку полупрозрачность у картинки сохранялась?

Answer 1

[GreatBOND]

https://codepen.io/MichaelBondar/pen/MmaGWG

Comments

[Алексей Мирошниченко]

Спасибо, помогло

[GreatBOND]

Алексей Мирошниченко: Рад что помогло решение. Удачи в создании проекта :)

Answer 2

[Евгений]

Повесить Hover на div

Answer 3

[Алексей Мирошниченко]

div имеет намного больший размер чем картинка, а если поместить в новый div то много нужно переделывать. Есть другой способ?