Php 覆盖在单个图标上

在使用PHP for Wordpress时，无法在单个图标上覆盖。在中继器循环之前使用时，似乎覆盖层覆盖了整个容器

我的问题是PHP周围覆盖层的位置，但它会影响整个容器。我只需要它来处理网站上的图标

<div class="section widget widget_<?php echo $view; ?> container">


    <div class="icon_row__image container">
        <div class="row">
            <div class="icon_image__wrapper ">

                <?php echo $object->icon_row; ?>

                    <?php

            // check if the repeater field has rows of data
                if( have_rows('icon_row') ):

                    // loop through the rows of data
                    while ( have_rows('icon_row') ) : the_row(); ?>


                            <div class="col-md-3">
                                <div class="col-md-12 overlay">
                                    <div class="overlay-text">Hello 
                                     World</div>
                                </div>

                                <img  src="<?php 
                                the_sub_field('icon_image');?>" 
                                class="icon_image__style" ><p 
                                class="icon_image__text"><?php 
                                the_sub_field('icon_text');?></p>
                           </div>


                        <?php endwhile;

                    else :

                    // no rows found

                    endif;

                    ?>


            </div>
        </div>
    </div>
</div>

提前为代码道歉-仍在学习中

---

提前感谢

我删除了php代码，并替换为演示的重复内容。这是密码-

.overlay{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：100%；
不透明度：0；
过渡：放松；
背景色：#008CBA；
}
.col-md-3：悬停覆盖{
不透明度：1；
}
.叠加文本{
颜色：白色；
字体大小：20px；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
文本对齐：居中；
}
.col-md-3{
位置：相对位置；
高度：100px；
宽度：100px；
利润率：30像素；
}
.col-md-3 img{
宽度：100%；
}

---

感谢您的回复。这很好，但需要让它和PHP一起工作。用单个的img标签控制位置要容易得多，但需要让它与WP repeater fieldDude一起工作。你完全正确，我是个白痴。我在CSS上有双重覆盖，我没有看到你改变了。你是个英雄！非常感谢。大家都很高兴知道这一点。请不要忘记接受这个答案
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
 }

.icon_row__image:hover .overlay {
  opacity: 1;
}

.overlay-text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
 text-align: center;
}