Wordpress mix-blend-mode, влияющий на дочерний div - PullRequest
Новая
       39

Wordpress mix-blend-mode, влияющий на дочерний div

0 голосов
/ 27 ноября 2018

Я пытаюсь перенести макет Photoshop в мою тему Wordpress.Я хочу, чтобы изображение портфолио получило "режим смешанного смешивания: умножить слой с зеленым цветом" при наведении курсора.

Текст H3 в дочернем div "vert-center" зависит от режима смешивания, и я не могу найти способ отключить его для этого 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?

Заранее спасибо!

...