0

我正在尝试将 Photoshop 模型移植到我的 Wordpress 主题中。 我希望投资组合图像在悬停时获得“混合混合模式：带有绿色的多层” 。

子 div“vert-center”中的 H3 文本受到混合混合模式的影响，我无法找到为此 div 禁用它的方法。

图片示例：1. 没有悬停 PS 模型 2. 悬停 PS 模型 3. 它现在在我的浏览器中的外观（圈出受影响的文本）。

这里提出了一个类似的问题，但是我无法用答案解决它。

我正在使用 Wordpress 并在我的主题中调整自定义 CSS 代码，因此可以使用的选项有限。

自定义 CSS

.work-info:hover { 
background-color: #00e1af;
mix-blend-mode: multiply;
opacity: 1 !important; 
}

用于显示投资组合项目的 HTML

<div class="col elastic-portfolio-item  element commercial feed videos" data-project-cat="commercial feed videos " data-default-color="true" data-title-color="" data-subtitle-color="" style="width: 425px; position: absolute; left: 850px; top: 0px;">

                    <div class="inner-wrap" data-animation="none">


                        <div class="work-item style-3-alt" data-custom-content="off" data-text-align="middle">

                            <img class="size- skip-lazy" src="https://www.example.com/wp-content/uploads/2018/01/jj-600x403.png" alt="" height="403" width="600" srcset="https://www.example.com/wp-content/uploads/2018/01/jj-600x403.png 600w, https://www.example.com/wp-content/uploads/2018/01/jj-400x269.png 400w" sizes="(min-width: 1000px) 25vw, (min-width: 690px) 50vw, 100vw" style="height: 285px; background-blend-mode:screen !important;">
                            <div class="work-info-bg"></div>
                            <div class="work-info">

                                <a href="https://vimeo.com/224912269?iframe=true" class="default-link gallery magnific" target="_blank" style="display: inline;"></a>                                   

                                <div class="vert-center">

                                        <h3>Example Portfolio Titel </h3> 


                                </div><!--/vert-center-->

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



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

如果我可以用 CSS 解决这个问题，现在有人吗？

先感谢您！

4

0 回答 0