How to alter hover effects for image button and embedded text?

Question

I have a button with embedded text inside the button and when hovering over the button, I would like it to display the image as well as change the color of the text.

Here is my code: http://jsfiddle.net/2qCY7/

HTML:

<a href="http://www.webpage.com/albums">
<div class="album-button">
<div class="album-text">Photo Albums</div>
</div></a>

CSS:

 .album-button {
width: 230px;
height: 230px;
border: 5px solid white;
overflow: hidden;
background: #EC580E;
display:inline-block;
}

.album-text {
font-size: 24px;
color:#FFFFFF;
top: 110px;
height: 80px;
width: 170px;
margin-left:50px;
margin-top:170px;
}


.album-button:hover {
background-image:url('http://www.photobookgirl.com/blog/wp-content/uploads/2010/06/LargeAssembledAlbumMpix.jpg');
background-size:cover;
background-position:-30px;
-webkit-transition: 400ms;
-moz-transition: 400ms;
-o-transition: 400ms;
-ms-transition: 400ms;
transition: 400ms;
}

.album-text:hover {
  color:#000000;
}

Right now, I can only change the color of the text by hovering over the text, specifically, but how do you change both elements by hovering over the image? BTW, the image used is an example only for this posting.

Answer 1

Try changing this:

.album-text:hover {
  color:#000000;
}

to this:

.album-button:hover .album-text{
  color:#000000;
}

Here's demo .

Answer 2

You can do this with a lot less HTML and only two classes:

<a href="http://www.webpage.com/albums" class="album-button">Photo Albums</a>

CSS:

.album-button {
    width: 230px;
    height: 60px;
    border: 5px solid white;
    overflow: hidden;
    background: #EC580E;
    display:inline-block;
    font-size: 24px;
    color:#FFFFFF;
    text-align:center;
    padding-top:170px;
    text-decoration:none;
}



.album-button:hover {
    background-image:url('http://www.photobookgirl.com/blog/wp-content/uploads/2010/06/LargeAssembledAlbumMpix.jpg');
    background-size:cover;
    background-position:-30px;
    -webkit-transition: 400ms;
    -moz-transition: 400ms;
    -o-transition: 400ms;
    -ms-transition: 400ms;
    transition: 400ms;
    color:#000000;
}

Demo