鼠标悬停在父div上的子元素的nth-child？

Question

我有覆盖div，并在鼠标悬停时显示子div。我想要的是根据nth-child选择器调整左侧位置百分比。如果它的第一个div那么左边应该是50％而第二个元素的左边应该是40％，依此类推。我该怎么做。请帮我。提前谢谢。

HTML

<div class="row mycustombox">
    <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 hidden-md hidden-sm hidden-xs" style="height: 300px; margin-bottom: 15px;">
        <a href="#" class="customoverlay">
            <img src="http://silver11.net/door/wp-content/uploads/2015/12/Furniture-EDI-for-the-Furniture-Industry.jpg" style="width: 100%; height: 300px;">
            <div class="inneroverlaybox" style="height: 300px; display: none; transition: all 0.35s ease-in-out;">
                <h3 data-fontsize="16" data-lineheight="24">World Class EDI for the Home Furnishing Industry</h3>
            </div>
        </a>
    </div>
    <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 hidden-md hidden-sm hidden-xs" style="height: 300px; margin-bottom: 15px;">
        <a href="#" class="customoverlay">
            <img src="http://silver11.net/door/wp-content/uploads/2015/12/Furniture-EDI-for-the-Furniture-Industry.jpg" style="width: 100%; height: 300px;">
            <div class="inneroverlaybox" style="height: 300px; display: none; transition: all 0.35s ease-in-out;">
                <h3 data-fontsize="16" data-lineheight="24">World Class EDI for the Home Furnishing Industry</h3>
            </div>
        </a>
    </div>
    <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 hidden-md hidden-sm hidden-xs" style="height: 300px; margin-bottom: 15px;">
        <a href="#" class="customoverlay">
            <img src="http://silver11.net/door/wp-content/uploads/2015/12/Furniture-EDI-for-the-Furniture-Industry.jpg" style="width: 100%; height: 300px;">
            <div class="inneroverlaybox" style="height: 300px; display: none; transition: all 0.35s ease-in-out;">
                <h3 data-fontsize="16" data-lineheight="24">World Class EDI for the Home Furnishing Industry</h3>
            </div>
        </a>
    </div>
    <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 hidden-md hidden-sm hidden-xs" style="height: 300px; margin-bottom: 15px;">
        <a href="#" class="customoverlay">
            <img src="http://silver11.net/door/wp-content/uploads/2015/12/Furniture-EDI-for-the-Furniture-Industry.jpg" style="width: 100%; height: 300px;">
            <div class="inneroverlaybox" style="height: 300px; display: none; transition: all 0.35s ease-in-out;">
                <h3 data-fontsize="16" data-lineheight="24">World Class EDI for the Home Furnishing Industry</h3>
            </div>
        </a>
    </div>
</div>

CSS

.customoverlay {
    position: relative;
    display: block;
    width: 100%;
}
.customoverlay img {
    margin: 0;
    padding: 0;
}
.customoverlay .inneroverlaybox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    overflow: hidden;
    -webkit-transition: opacity 0.3s ease-in-out 0s;
    -moz-transition: opacity 0.3s ease-in-out 0s;
    -ms-transition: opacity 0.3s ease-in-out 0s;
    -o-transition: opacity 0.3s ease-in-out 0s;
    background: #002137;
}
.customoverlay .inneroverlaybox h3 {
    position: relative;
    left: 100%;
    padding: 0;
    margin: 0;
    color: #fff;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}
.customoverlay:hover .inneroverlaybox { opacity: 1; }
.customoverlay:hover .inneroverlaybox h3:nth-child(1) { left: 1.5%; }
.customoverlay:hover .inneroverlaybox h3:nth-child(2) { left: 40% !important; }
.customoverlay:hover .inneroverlaybox h3:nth-child(3) { left: 40% !important; }