Question

我正在尝试将Photoshop样机移植到我的Wordpress主题中。我希望组合图像在悬停时获得“混合混合模式：用绿色乘以图层” 。

子div“ vert-center”中的H3文本受mix-blend-mode影响，我无法找到一种禁用该div的方法。

Image example: 1. no hover PS mockup 2. on hover PS mockup 3. how it looks in my browser right now (with the affected text circled).

类似的问题was asked here，但我无法通过答案解决。

我正在使用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修复吗？

先谢谢您！

Wordpress混合混合模式影响子div

0 个答案: