html - 包含悬停操作的复杂 div 集的定位问题？

Question

我发现了一个我非常喜欢的图像悬停效果，所以我尝试使用一些工具对其进行逆向工程，以便在 wordpress 构建的网站中使用。

我设法使整个效果在 codepen 中正常工作(此处:https://codepen.io/ironorrfitness/pen/aXpBoz)，但是当我将此代码添加到我正在使用的 wordpress 构建器时，定位全部关闭。 (此处:https://ironorrfitness.com/landing-page/)

我认为这与 position: absolute 的使用有关，但我不确定到底是什么导致了这个问题。任何见解表示赞赏，谢谢!

这是我的 HTML

    <div class="portfolio-items-cbh" data-ps="7" data-gutter="5px">
    <div class="col-cbh animated-in" data-default-color="true" style="width: 368px; position: absolute; left: 5px; top: 5px; z-index: 14;">
    <div class="work-item">

    <img src="http://themenectar.com/demo/salient-business/wp-content/uploads/2016/10/girl-1000x1000.jpg" alt="" height="1000" width="1000" sizes="(min-width: 1000px) 50vw, (min-width: 690px) 100vw, 100vw" style="height: 358px;">
    <div class="work-info-bg"></div>
      <div class="work-info">
        <div class="vert-center">

          <h3>Nectar Advertisement</h3>
          <p>October 8, 2016</p>
          </div>
          <!--/vert-center-->

          </div>
          </div>
          <!--work-item-->


          <!--/inner-wrap-->
          </div>
          <!--/col-cbh-->

          </div>
          <!--/inner-wrap-->
          </div>
          <!--/col-cbh-->

          </div>

这是我的 CSS:

    p{-webkit-font-smoothing:subpixel-antialiased; -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

    h3{-webkit-font-smoothing:antialiased -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

    .portfolio-items-cbh .col-cbh{-webkit-transform-style:preserve-3d;transform-style:preserve-3d; -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

    .portfolio-items-cbh .work-info-bg{opacity:0;filter:alpha(opacity=0);height:100%;width:100.2%;top:0px;left:0px;background-color:#27CFC3;position:absolute;z-index:2;transition:all 0.4s cubic-bezier(.15,.75,.5,1) 0s;-webkit-transition:all 0.4s cubic-bezier(.15,.75,.5,1) 0s; -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

    .portfolio-items-cbh .work-info{opacity:0;filter:alpha(opacity=0);position:absolute;z-index:10;padding:0px 20px;height:100%;width:100%;top:0px;left:0px;color:#fff;transition:all 0.2s ease;-webkit-transition:all 0.2s ease; -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

    .portfolio-items-cbh .col-cbh{height:100%;-webkit-transition-timing-function:cubic-bezier(.16,.85,.45,1);transition-timing-function:cubic-bezier(.16,.85,.45,1); -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

    .portfolio-items-cbh .col-cbh{height:auto;}

    .portfolio-items-cbh[data-ps="7"] .col-cbh img{-ms-transition:transform 1s cubic-bezier(0, 1, 0.5, 1);-webkit-transition:transform 1s cubic-bezier(0, 1, 0.5, 1);transition:transform 1s cubic-bezier(0, 1, 0.5, 1); -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

    .portfolio-items-cbh[data-ps="7"] .col-cbh{background-color:transparent; -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

    .portfolio-items-cbh[data-ps="7"] .col-cbh .work-info .vert-center{margin:0!important;-ms-transition:transform 1s cubic-bezier(0, 1, 0.5, 1), opacity 1s cubic-bezier(0, 1, 0.5, 1);-webkit-transition:transform 1s cubic-bezier(0, 1, 0.5, 1), opacity 1s cubic-bezier(0, 1, 0.5, 1);transition:transform 1s cubic-bezier(0, 1, 0.5, 1), opacity 1s cubic-bezier(0, 1, 0.5, 1);-ms-transform:translateY(-50%) perspective(1px) scale(0.8);transform:translateY(-50%) perspective(1px) scale(0.8);-webkit-transform:translateY(-50%) perspective(1px) scale(0.8);-webkit-backface-visibility:hidden;backface-visibility:hidden;opacity:0; -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

    .portfolio-items-cbh[data-ps="7"] .col-cbh .work-info-bg{-ms-transition:opacity 1s cubic-bezier(0, 1, 0.5, 1);-webkit-transition:opacity 1s cubic-bezier(0, 1, 0.5, 1);transition:opacity 1s cubic-bezier(0, 1, 0.5, 1); -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

    .portfolio-items-cbh[data-ps="7"] .col-cbh:hover .work-info-bg{opacity:0.8;}

    .portfolio-items-cbh[data-ps="7"] .col-cbh .work-info .vert-center *,.portfolio-items-cbh[data-ps="7"] .work-info{opacity:1;}

    .portfolio-items-cbh[data-ps="7"] .work-info{padding:0 19%;}

    .portfolio-items-cbh[data-ps="7"] .col-cbh[data-default-color="true"] .work-item:not(.style-3) .work-info-bg{background-color:#000!important;}

    .portfolio-items-cbh[data-ps="7"] .col-cbh:hover img{transform:scale(1.1);-webkit-transform:scale(1.1);-ms-transform:scale(1.1);}

    .portfolio-items-cbh[data-ps="7"] .col-cbh:hover .work-info .vert-center{opacity:1;transform:scale(1) perspective(1px) translateY(-50%);-webkit-transform:scale(1) perspective(1px) translateY(-50%);-ms-transform:scale(1) perspective(1px) translateY(-50%);}

    .portfolio-items-cbh .col-cbh h3{position:relative;top:0px;color:#fff;margin-bottom:10px;}

    .portfolio-items-cbh .col-cbh img{display:block;margin-bottom:0px;width:auto;}

    .portfolio-items-cbh .col-cbh .work-info .vert-center{text-align:center;margin-top:-20px;position:relative;z-index:10;top:50%;width:100%;transform:translateY(-50%);-webkit-transform:translateY(-50%);transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s;}

    .portfolio-items-cbh .col-cbh .work-info .vert-center p{padding-bottom:0px;}

    .portfolio-items-cbh .col-cbh .work-info .vert-center *{opacity:0;-ms-filter:"alpha(opacity=0)";transition:all 0.2s ease;-webkit-transition:all 0.2s ease;}

    .portfolio-items-cbh .col-cbh .work-item{position:relative;margin-bottom:15px;overflow:hidden;width:100%;}

    .portfolio-items-cbh[data-gutter="5px"] .col-cbh{padding:5px!important;}


    .portfolio-items-cbh .col-cbh[data-default-color="true"]  .work-info-bg{background-color:#3f59ff!important;}

Answer 1

您的列排列不正确。放et_pb_column et_pb_column_1_3列并排删除 absolute来自 <div class="col-cbh animated-in" .希望这能有所帮助。附上截图。