SCSS/CSS hover on image

Question

I want to hover on a box and transform scale (1.1) of image. But the problem is I have a text in front of image. So if I hover on the text It's not working

I want to hover anywhere on the box and scale the image.

And this is my code

HTML

<div class="col-md-12 club-index__box">
   <a href="{{ path('toro_web_club_show', {'id': r.id}) }}">
      <div class="club-index__box--nation">
         <div class="club-index__box--image">{{ toro_image(r.coverImage, '1050x250') }}</div>
         <div class="club-index__box--text">
            <span class="club-index__box--title">{{ r.name }}</span>
            <span class="club-index__box--sub-title">ทีมชาติไทย 2016 , ผู้จัดการทีม , รายชื่อผู้เล่น</span>
         </div>
      </div>
   </a>
</div>

SCSS

.club-index {
   &__box {
       margin-top: 30px;
       &--nation {
           position: relative;
           display: block;
           width: 100%;
           height: 250px;
           margin: 0 auto;
           background-color: #18202d;
           text-align: center;
           overflow: hidden;
       }
       &--image {
           position: absolute;
           transition: all 1s ease-in-out 0s;
           -moz-transition: all 1s ease-in-out 0s;
           -webkit-transition: all 1s ease-in-out 0s;
           -o-transition: all 1s ease-in-out 0s;
           &:hover {
               transform: scale(1.1);
               -moz-transform: scale(1.1);
               -webkit-transform: scale(1.1);
               -o-transform: scale(1.1);
           }
       }
       &--text {
           position: relative;
           z-index: 1;
       }
       &--title {
           padding-top: 75px;
           font-size: 30px;
           color: #fff;
           text-align: center;
           &:hover{
               transform: scale(1.1);
               -moz-transform: scale(1.1);
               -webkit-transform: scale(1.1);
               -o-transform: scale(1.1);
           }
       }
       &--sub-title {
           margin-top: 20px;
           font-size: 16px;
           color: #fff;
           text-align: center;
           &:hover{
               transform: scale(1.1);
               -moz-transform: scale(1.1);
               -webkit-transform: scale(1.1);
               -o-transform: scale(1.1);}}}}
           }
       }
   }
}

Answer 1

instead of scaling the image on hover of image scale the image on hover of its parent element which includes both image and text

 &--nation:hover > image {
          //scale to 1.1
 }

EDIT: Your code will be like

    .club-index {
       &__box {
           margin-top: 30px;
           &--nation {
               position: relative;
               display: block;
               width: 100%;
               height: 250px;
               margin: 0 auto;
               background-color: #18202d;
               text-align: center;
               overflow: hidden;

           }
           &--nation:hover > &--image {
                   transform: scale(1.1);
                   -moz-transform: scale(1.1);
                   -webkit-transform: scale(1.1);
                   -o-transform: scale(1.1);
               }
           &--image {
               position: absolute;
               transition: all 1s ease-in-out 0s;
               -moz-transition: all 1s ease-in-out 0s;
               -webkit-transition: all 1s ease-in-out 0s;
               -o-transition: all 1s ease-in-out 0s;
           }