CSS ~ Hover not working to change external class - html

Question

I have two classes, .growImage and .footer. When you hover over a div that contains the image, the image follow the following CSS...
.growImage:hover {
transform:scale(1.5,1.5);
transform-origin:0 0;
}
and it works... but below that CSS is this...
.growImage:hover ~ #footer {
height:1000px;
}
and it is supposed to enlarge the height of the footer as well but it doesn't. Please note I have tried converting both of them to ID'S (#example) and both of them to regular classes (.example), that didn't work. I tried add important! to the changing attribute, that also didn't work. The most confusing thing is, I started a new html webpage and made blank divs that contained nothing and minimal attributes and the code above worked on those so why isn't it working on the current webpage I am working on?
Here is the HTML...
<div class="growImage"><img src="images/familyTree.jpg" width="333px" height="250px"/></div>
<div class="footer">
This is the footer.</div>
Here is the CSS...
.footer{
height:50px;
width:960px;
font-size:16px;
text-align:center;
background-color:white;
color:black;
padding-top:27px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:left;
}
.growImage:hover{
transform:scale(1.5,1.5);
transform-origin:0 0;
}
.growImage:hover ~ .footer {
height:1000px;
}
Sorry I should have included this before but this is the rest of the CSS...
#container{
height:920px;
width:960px;
background-color:#000;
margin:auto;
display: block;
float: none;
}
#header{
height:100px;
width:960px;
float:left;
background-color:white;
}
#navigation{
height:100px;
width:660px;
font-size:30px;
color:black;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:left;
background-color:white;
}
#logo{
height:100px;
width:300px;
float:left;
background-color:white;
}
#body{
height:770px;
width:920px;
background-color:#0081c3;
color:white;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:20px;
padding-left:20px;
padding-right:20px;
padding-top:20px;
float:left;
}
#footer{
height:50px;
width:960px;
font-size:16px;
text-align:center;
background-color:white;
color:black;
padding-top:27px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:left;
}
html{
/*background-color:#ffd636;*/
background-image:url(images/background.jpg);
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
a:Link{
text-decoration:none;
}
a:visited{
text-decoration:none;
}
a:hover{
text-decoration:none;
}
a:active{
text-decoration:bold;
}
img{
border-style: none;
}
.buttonBorder{
width:165px;
height:100px;
padding-top:31px;
color:white;
float:left;
border-left: 1px solid white;
box-sizing: border-box;
background-color:#ffd636;
}
.buttonSelected{
width:165px;
height:100px;
padding-top:31px;
color:white;
float:left;
border-left: 1px solid white;
box-sizing: border-box;
background-color:#ed3133;
}
.buttonBorder:hover{
color:#ffd636;
background-color:white;
}
td{
width:150px;
}
.growImage:hover{
transform:scale(1.5,1.5);
transform-origin:0 0;
}
.growImage:hover ~ .footer {
height:1000px;
}

Answer 1

I tried with both id and class . it doesn't shows any problem.
But you should implement like this because css scale is not the best idea because its will overlap siblings elements. try to use height: ( If u want to see full image when hovering )or set parent element overflow as hidden
Check here
#footer{
height:50px;
width:960px;
font-size:16px;
text-align:center;
background-color:white;
color:black;
padding-top:27px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:left;
}
/* This rule added just for testing purpose only */
div#footer {
background:green;
transition-duration:.5s;
}
/* overflow avoid overflow of child elements when hovering */
#growImage{
overflow:hidden;
}
#growImage:hover img{
transform:scale(1.5,1.5);
transform-origin:0 0;
transition-duration:.5s;
}
#growImage:hover ~ #footer {
height:1000px;
}
<div id="growImage">
<img src="http://devgene.com/wp-content/themes/devgene/assets/img/tba-mobile.png" width="333px" height="250px"/>
</div>
<div id="footer">
This is the footer.</div>