CSS过渡缓和不适用于宽度100％

Question

我正在尝试使用CSS3过渡来调整悬停时div的宽度，但是当我将鼠标悬停在div上时它不起作用，这是我的代码：

.photo_desc {
  width: 45%;
  background: url(../images/photo_desc2.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  height: 600px;
  overflow: hidden;
}

.hovering {
  height: 100%;
  width: 0;
  background-color: #BE8F39;
  opacity: 0;
  -webkit-transition: width .3s ease-in-out;
  -moz-transition: width .3s ease-in-out;
  -o-transition: width .3s ease-in-out;
  transition: width .3s ease-in-out;
}

.photo_desc:hover .hovering {
  opacity: 0.5;
  width: 100%;
}

<div class="photo_desc">
  <div class="hovering"></div>
</div>