如何从另一个div获得悬停效果？

Question

我试图将缩放效果称为标题上的悬停，但仅在图像上起作用。

JSFiddle Demo

 .image {
      position: relative;
      overflow: hidden;
      width: 100px;
    }
    .image img {
      max-width: 100%;
      -moz-transition: all 0.3s;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
    }
    .image:hover img, .title-header:hover .image img{
      -moz-transform: scale(1.1);
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }

    <div>
      <a href="#">
        <div class="image">
          <img src="pepsi.jpg">
        </div>
      </a>
    </div>
    <div class="title">
      <div class="title-header">
        <a href="#"><h4>Title Here</h4></a>
      </div>
    </div>

   

当我也将鼠标悬停在文本上时，我也希望能够放大图像。我该如何实现？