Hover effect not showing in child div - html

Question

I have four categories in my solutions page, Oil&gas, utilities, Inteligent building,
Industrial Engineering.
I have put a hover effect on each category there is a main div
called pic_categry(while hover the background colour change). And I have'
also put an hover effect in child div of pic_categry called pic_catgry_img1. My
problem is when I hovering the parent div(pic_categry) the hover effect of
pic_catgry_img1 is not working its working only hover that div. How can I display both hover effect when hovering parent div (pic_categry).
HTML:
<div id="wrapper4"> <a href="oil_n_gas.php">
<div class="pic_categry">
<div class="pic_catgry_img1"></div>
<div class="pic_catgry_title">Oil N Gas</div>
</div>
</a> <a href="smart_meter.php">
<div class="pic_categry">
<div class="pic_catgry_img3"></div>
<div class="pic_catgry_title">Utilities</div>
</div>
</a> <a href="inteligent.php">
<div class="pic_categry">
<div class="pic_catgry_img2"></div>
<div class="pic_catgry_title">Intelligent Building</div>
</div>
</a> <a href="industrial_engineering.php">
<div class="pic_categry align_tab">
<div class="pic_catgry_img4"></div>
<div class="pic_catgry_title">Industrial Engineering </div>
</div>
</a>
</div>
CSS:
.pic_categry {
width: 233px;
height: 239px;
float: left;
text-align: center;
color: #425B97;
margin-bottom: 20px;
padding-top: 10px;
padding-right: 3px;
padding-bottom: 5px;
padding-left: 3px;
margin-right:23px;
}
.pic_categry:hover {
background-color:#e8e8e8;
border-radius:4px;
color:#263a87 !important;
}
.pic_catgry_title {
font-family:'Varela', sans-serif;
font-size:20px;
text-align:center;
padding-bottom: 10px;
}
.pic_catgry_title:hover {
color:#263a87;
text-decoration:none !important;
}
.pic_catgry_img1 {
width: 157px;
height: 128px;
margin: 0px auto;
background-image: url(../images/new/ind_oil.png);
background-repeat: no-repeat;
background-position: left top;
}
.pic_catgry_img1:hover {
background-image: url(../images/new/ind_oil.png);
background-repeat: no-repeat;
background-position: left bottom;
}
.pic_catgry_img2 {
width: 157px;
height: 128px;
margin: 0px auto;
background-image: url(../images/new/ind_smart.png);
background-repeat: no-repeat;
background-position: left top;
}
.pic_catgry_img2:hover {
background-image: url(../images/new/ind_smart.png);
background-repeat: no-repeat;
background-position: left bottom;
}
.pic_catgry_img3 {
width: 157px;
height: 128px;
margin: 0px auto;
background-image:url(../images/new/ind_utlts.png);
background-repeat: no-repeat;
background-position: left top;
}
.pic_catgry_img3:hover {
background-image: url(../images/new/ind_utlts.png);
background-repeat: no-repeat;
background-position: left bottom;
}
.pic_catgry_img4 {
width: 157px;
height: 128px;
margin: 0px auto;
background-image:url(../images/new/ind_heavy.png);
background-repeat: no-repeat;
background-position: left top;
}
.pic_catgry_img4:hover {
background-image: url(../images/new/ind_heavy.png);
background-repeat: no-repeat;
background-position: left bottom;
}

Answer 1

Just change your code like this:
.pic_catgry_img1:hover{
background-image: url(../images/new/ind_oil.png);
background-repeat: no-repeat;
background-position: left bottom;
}
to
.pic_categry:hover .pic_catgry_img1{
background-image: url(../images/new/ind_oil.png);
background-repeat: no-repeat;
background-position: left bottom;
}
so you can apply hover effects changes on child div while mouse enters parent div.

Answer 2

change the background color and use your desired image
.pic_categry > .pic_catgry_img1:hover{background-color:#FF0000;}

Answer 3

try
.pic_categry:hover .pic_catgry_img1{
background-position: left bottom; //only need this
}
from #Atrem Fitiskin 's comment
change only dependent properties (in this case, only
background-position).