我如何得到两个悬停效果发生?

Question

我想要发生的是，无论光标在img内的任何地方，悬停效果都会发生。但是，文本的div悬停效果不会发生，除非光标位于中心，此时img悬停结束。

我试过移动相对和绝对位置，因为我认为这可能是问题所在，但它没有改变任何东西。我试着改变显示和过渡，但这些都没有解决它。

.pictures li {
display: block;
float: right;
clear: right;
position: relative;
margin-bottom: 2.8rem;
}
.photo img {
opacity: 1;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.photo img:hover {
opacity: 0.7;
transform: scale(1.13);
}
.photo div:hover {
opacity: 1;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.text {
background-color: #8b0000;
color: white;
font-size: 16px;
padding: 16px 16px;
}

<ul class="pictures">
<li>
<figure class="photo">
<img src="https://www.taemana.com/wp-content/uploads/2017/09/team-placeholder.png" alt="Currency converter">
<div class="middle">
<div class="text">Open</div>
</div>
</figure>
</li>
<li>
<figure class="photo">
<img src="https://www.taemana.com/wp-content/uploads/2017/09/team-placeholder.png">
<div class="middle">
<div class="text">Open</div>
</div>
</figure>
</li>
<li>
<figure class="photo">
<img src="https://www.taemana.com/wp-content/uploads/2017/09/team-placeholder.png">
<div class="middle">
<div class="text">Open</div>
</div>
</figure>
</li>
</ul>

Answer 1

将鼠标悬停在.photo上，然后设置div样式。

.pictures li {
display: block;
float: right;
clear: right;
position: relative;
margin-bottom: 2.8rem;
}
.photo img {
opacity: 1;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.photo:hover img {
opacity: 0.7;
transform: scale(1.13);
}
.photo:hover div {
opacity: 1;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.text {
background-color: #8b0000;
color: white;
font-size: 16px;
padding: 16px 16px;
}

<ul class="pictures">
<li>
<figure class="photo">
<img src="https://www.taemana.com/wp-content/uploads/2017/09/team-placeholder.png" alt="Currency converter">
<div class="middle">
<div class="text">Open</div>
</div>
</figure>
</li>
<li>
<figure class="photo">
<img src="https://www.taemana.com/wp-content/uploads/2017/09/team-placeholder.png">
<div class="middle">
<div class="text">Open</div>
</div>
</figure>
</li>
<li>
<figure class="photo">
<img src="https://www.taemana.com/wp-content/uploads/2017/09/team-placeholder.png">
<div class="middle">
<div class="text">Open</div>
</div>
</figure>
</li>
</ul>