Change child color on hover over parent background image

Question

I created an anchor link with a background image. I also have a span tag that holds some text as well. My intended effect is to have the color of the span tag change when a user hovers over the entire image and not just the span tag (which is positioned in the middle of the background image).

Here's my HTML:

<a class="photos" href="link/to/folder">
  <span>Event Photos</span>
</a>

And here is my SCSS:

.photos {display: block;
background: url('imgs/photos-bg.jpg') no-repeat center center; 
background-size:cover;
height: auto; 
padding-top: 11%; 
padding-bottom: 14%;
@include transition(all .3s ease-in-out);
 span {width: 20%;
 margin: 0 auto;
 background: $drkgrey;
 text-align: center; 
 @include sansproxlgt(em(28)); 
 color: $white; 
 padding:1% 1%; 
 display: block;
   &:hover{color: $blue;}
 }
}

I feel that I am close, but I am not sure where I am getting hung up.

Answer 1

a.photos:hover span {color: #color;}

Answer 2

In SASS:

&hover: {
     span { color:$blue;}
}

Answer 3

For anyone who wants to know this was my final SCSS to get this to work. Thanks to Jonline and Gray Spectrum for the insight!

a.photos {
 display: block;
 background: url('imgs/photos-bg.jpg') no-repeat center center; 
 background-size:cover;
 height: auto; 
 padding: 14% 0;
  span {
   width: 20%; 
   margin: 0 auto; 
   background: $drkgrey; 
   text-align: center; 
   @include sansproxlgt(em(28)); 
   color: $white; 
   padding:1% 1%; 
   display: block; 
   @include transition(all .3s ease-in-out);
     @media screen and (max-width: 36.5em ) {
      width: 30%;}
  }
  &:hover span {color: $blue;}
}