How do I get both hover effects to happen?

Question

What I want to happen is for both hover effects to happen whenever the cursor is anywhere within the img. However, the div hover effect for the text doesn't occur unless the cursor is in the center, at which point the img hover ends.

I have tried moving the relative and absolute positioning around, because I thought that might've been the issue, but it didn't change anything. I tried changing the display and transitions, but those didn't solve it either.

.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

Put the hover on the .photo and then style the 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>