Question

使用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>

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;
}

预先为代码道歉-仍在学习。

预先感谢

Answer 1

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

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
 }

.col-md-3: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;
}

.col-md-3{
  position:relative;
  height: 100px;
  width : 100px;
  margin: 30px;
}
.col-md-3 img{
  width:100%;
}

<div class="section widget widget_<?php echo $view; ?> container">


    <div class="icon_row__image container">
        <div class="row">
            <div class="icon_image__wrapper ">

                <div class="col-md-3">
                    <div class="col-md-12 overlay">
                        <div class="overlay-text">Hello World</div>
                    </div>
                    <img  src="https://www.star2.com/wp-content/uploads/2015/10/Slappy-770x470.png" class="icon_image__style" >
                    <p class="icon_image__text">Random Text</p>
               </div>
              
              <div class="col-md-3">
                    <div class="col-md-12 overlay">
                        <div class="overlay-text">Hello World</div>
                    </div>
                    <img  src="https://www.star2.com/wp-content/uploads/2015/10/Slappy-770x470.png" class="icon_image__style" >
                    <p class="icon_image__text">Random Text</p>
               </div>
              
              <div class="col-md-3">
                    <div class="col-md-12 overlay">
                        <div class="overlay-text">Hello World</div>
                    </div>
                    <img  src="https://www.star2.com/wp-content/uploads/2015/10/Slappy-770x470.png" class="icon_image__style" >
                    <p class="icon_image__text">Random Text</p>
               </div>

            </div>
        </div>
    </div>
</div>

叠加在单个图标上

1 个答案: