Hover effect not showing in child div

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).