Wordpress mix-blend-mode affecting child div
0
I'm trying to port a Photoshop mockup into my Wordpress theme. I want the portfolio image to get a "mixed-blend-mode: multiply layer with a green color" on hover.
The H3 text in the child div "vert-center" gets affected by the mix-blend-mode and I can't figure out a way to disable it for this 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).
A similar question was asked here however I haven't been able to solve it with the answer.
I'm working in Wordpress and adjusting the Custom CSS code in my theme so have limited options to play with.
Custom CSS
.work-info:hover {
background-color: #00e1af;
mix-blend-mode: multiply;
opacity: 1 !important;
}
The HTML for displaying the portfolio item
<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>
Does someone now if I can fix this with CSS?
Thank you in advance!
html css wordpress wordpress-theming mix-blend-mode
asked Nov 27 '18 at 14:15
MarteiMartei
54
add a comment |
0
I'm trying to port a Photoshop mockup into my Wordpress theme. I want the portfolio image to get a "mixed-blend-mode: multiply layer with a green color" on hover.
The H3 text in the child div "vert-center" gets affected by the mix-blend-mode and I can't figure out a way to disable it for this 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).
A similar question was asked here however I haven't been able to solve it with the answer.
I'm working in Wordpress and adjusting the Custom CSS code in my theme so have limited options to play with.
Custom CSS
.work-info:hover {
background-color: #00e1af;
mix-blend-mode: multiply;
opacity: 1 !important;
}
The HTML for displaying the portfolio item
<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>
Does someone now if I can fix this with CSS?
Thank you in advance!
html css wordpress wordpress-theming mix-blend-mode
asked Nov 27 '18 at 14:15
MarteiMartei
54
have you tried taking .vert-center element out from .work-info and place it in after .work-info element.within .work-item. and you will have to make it a absolute positioned within a relative positioned div. ie: div.work-item.
– vssadineni
Nov 27 '18 at 14:45
Thank you for your response! It is a Wordpress theme so I can't simply move a div out without going into the theme code and see how the page get's generated. However if that is the only way I have to figure it out I guess. Would be better if I could do it using custom css.
– Martei
Nov 27 '18 at 14:50
here the problem is you need Mix-blend-mode and at the same time you cannot have your text get effected on hover. I guess you could try this. hope it will work as I do not know the whole html structure above img tag. so just guessing. [.work-info a.gallery.magnific:hover{mix-blend-mode: multiply;} ] instead of whole div.
– vssadineni
Nov 27 '18 at 14:54
When I use "work-info {background-color:red !important;}" I see a change. But using ".work-info a.gallery.magnific:hover{background-color:red !important;}" nothing happens. Is the selector wrong or is there something which makes that element unable to visibly change for example it's background color?
– Martei
Nov 27 '18 at 15:22
I ment the mix-blend-mode effect which in this case background color. so I think both or background color alone but without !important. if possible.
– vssadineni
Nov 28 '18 at 6:03
add a comment |
0
0
0
I'm trying to port a Photoshop mockup into my Wordpress theme. I want the portfolio image to get a "mixed-blend-mode: multiply layer with a green color" on hover.
The H3 text in the child div "vert-center" gets affected by the mix-blend-mode and I can't figure out a way to disable it for this 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).
A similar question was asked here however I haven't been able to solve it with the answer.
I'm working in Wordpress and adjusting the Custom CSS code in my theme so have limited options to play with.
Custom CSS
.work-info:hover {
background-color: #00e1af;
mix-blend-mode: multiply;
opacity: 1 !important;
}
The HTML for displaying the portfolio item
<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>
Does someone now if I can fix this with CSS?
Thank you in advance!
html css wordpress wordpress-theming mix-blend-mode
asked Nov 27 '18 at 14:15
MarteiMartei
54
I'm trying to port a Photoshop mockup into my Wordpress theme. I want the portfolio image to get a "mixed-blend-mode: multiply layer with a green color" on hover.
The H3 text in the child div "vert-center" gets affected by the mix-blend-mode and I can't figure out a way to disable it for this 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).
A similar question was asked here however I haven't been able to solve it with the answer.
I'm working in Wordpress and adjusting the Custom CSS code in my theme so have limited options to play with.
Custom CSS
.work-info:hover {
background-color: #00e1af;
mix-blend-mode: multiply;
opacity: 1 !important;
}
The HTML for displaying the portfolio item
<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>
Does someone now if I can fix this with CSS?
Thank you in advance!
html css wordpress wordpress-theming mix-blend-mode
html css wordpress wordpress-theming mix-blend-mode
asked Nov 27 '18 at 14:15
MarteiMartei
54
asked Nov 27 '18 at 14:15
MarteiMartei
54
edited Nov 27 '18 at 15:39
Martei
asked Nov 27 '18 at 14:15
MarteiMartei
54
asked Nov 27 '18 at 14:15
MarteiMartei
54
asked Nov 27 '18 at 14:15
MarteiMartei
54
54
have you tried taking .vert-center element out from .work-info and place it in after .work-info element.within .work-item. and you will have to make it a absolute positioned within a relative positioned div. ie: div.work-item.
– vssadineni
Nov 27 '18 at 14:45
Thank you for your response! It is a Wordpress theme so I can't simply move a div out without going into the theme code and see how the page get's generated. However if that is the only way I have to figure it out I guess. Would be better if I could do it using custom css.
– Martei
Nov 27 '18 at 14:50
here the problem is you need Mix-blend-mode and at the same time you cannot have your text get effected on hover. I guess you could try this. hope it will work as I do not know the whole html structure above img tag. so just guessing. [.work-info a.gallery.magnific:hover{mix-blend-mode: multiply;} ] instead of whole div.
– vssadineni
Nov 27 '18 at 14:54
When I use "work-info {background-color:red !important;}" I see a change. But using ".work-info a.gallery.magnific:hover{background-color:red !important;}" nothing happens. Is the selector wrong or is there something which makes that element unable to visibly change for example it's background color?
– Martei
Nov 27 '18 at 15:22
I ment the mix-blend-mode effect which in this case background color. so I think both or background color alone but without !important. if possible.
– vssadineni
Nov 28 '18 at 6:03
add a comment |
have you tried taking .vert-center element out from .work-info and place it in after .work-info element.within .work-item. and you will have to make it a absolute positioned within a relative positioned div. ie: div.work-item.
– vssadineni
Nov 27 '18 at 14:45
Thank you for your response! It is a Wordpress theme so I can't simply move a div out without going into the theme code and see how the page get's generated. However if that is the only way I have to figure it out I guess. Would be better if I could do it using custom css.
– Martei
Nov 27 '18 at 14:50
here the problem is you need Mix-blend-mode and at the same time you cannot have your text get effected on hover. I guess you could try this. hope it will work as I do not know the whole html structure above img tag. so just guessing. [.work-info a.gallery.magnific:hover{mix-blend-mode: multiply;} ] instead of whole div.
– vssadineni
Nov 27 '18 at 14:54
When I use "work-info {background-color:red !important;}" I see a change. But using ".work-info a.gallery.magnific:hover{background-color:red !important;}" nothing happens. Is the selector wrong or is there something which makes that element unable to visibly change for example it's background color?
– Martei
Nov 27 '18 at 15:22
I ment the mix-blend-mode effect which in this case background color. so I think both or background color alone but without !important. if possible.
– vssadineni
Nov 28 '18 at 6:03
have you tried taking .vert-center element out from .work-info and place it in after .work-info element.within .work-item. and you will have to make it a absolute positioned within a relative positioned div. ie: div.work-item.
– vssadineni
Nov 27 '18 at 14:45
have you tried taking .vert-center element out from .work-info and place it in after .work-info element.within .work-item. and you will have to make it a absolute positioned within a relative positioned div. ie: div.work-item.
– vssadineni
Nov 27 '18 at 14:45
Thank you for your response! It is a Wordpress theme so I can't simply move a div out without going into the theme code and see how the page get's generated. However if that is the only way I have to figure it out I guess. Would be better if I could do it using custom css.
– Martei
Nov 27 '18 at 14:50
Thank you for your response! It is a Wordpress theme so I can't simply move a div out without going into the theme code and see how the page get's generated. However if that is the only way I have to figure it out I guess. Would be better if I could do it using custom css.
– Martei
Nov 27 '18 at 14:50
here the problem is you need Mix-blend-mode and at the same time you cannot have your text get effected on hover. I guess you could try this. hope it will work as I do not know the whole html structure above img tag. so just guessing. [.work-info a.gallery.magnific:hover{mix-blend-mode: multiply;} ] instead of whole div.
– vssadineni
Nov 27 '18 at 14:54
here the problem is you need Mix-blend-mode and at the same time you cannot have your text get effected on hover. I guess you could try this. hope it will work as I do not know the whole html structure above img tag. so just guessing. [.work-info a.gallery.magnific:hover{mix-blend-mode: multiply;} ] instead of whole div.
– vssadineni
Nov 27 '18 at 14:54
When I use "work-info {background-color:red !important;}" I see a change. But using ".work-info a.gallery.magnific:hover{background-color:red !important;}" nothing happens. Is the selector wrong or is there something which makes that element unable to visibly change for example it's background color?
– Martei
Nov 27 '18 at 15:22
When I use "work-info {background-color:red !important;}" I see a change. But using ".work-info a.gallery.magnific:hover{background-color:red !important;}" nothing happens. Is the selector wrong or is there something which makes that element unable to visibly change for example it's background color?
– Martei
Nov 27 '18 at 15:22
I ment the mix-blend-mode effect which in this case background color. so I think both or background color alone but without !important. if possible.
– vssadineni
Nov 28 '18 at 6:03
I ment the mix-blend-mode effect which in this case background color. so I think both or background color alone but without !important. if possible.
– vssadineni
Nov 28 '18 at 6:03
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53501683%2fwordpress-mix-blend-mode-affecting-child-div%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53501683%2fwordpress-mix-blend-mode-affecting-child-div%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
have you tried taking .vert-center element out from .work-info and place it in after .work-info element.within .work-item. and you will have to make it a absolute positioned within a relative positioned div. ie: div.work-item.
– vssadineni
Nov 27 '18 at 14:45
Thank you for your response! It is a Wordpress theme so I can't simply move a div out without going into the theme code and see how the page get's generated. However if that is the only way I have to figure it out I guess. Would be better if I could do it using custom css.
– Martei
Nov 27 '18 at 14:50
here the problem is you need Mix-blend-mode and at the same time you cannot have your text get effected on hover. I guess you could try this. hope it will work as I do not know the whole html structure above img tag. so just guessing. [.work-info a.gallery.magnific:hover{mix-blend-mode: multiply;} ] instead of whole div.
– vssadineni
Nov 27 '18 at 14:54
When I use "work-info {background-color:red !important;}" I see a change. But using ".work-info a.gallery.magnific:hover{background-color:red !important;}" nothing happens. Is the selector wrong or is there something which makes that element unable to visibly change for example it's background color?
– Martei
Nov 27 '18 at 15:22
I ment the mix-blend-mode effect which in this case background color. so I think both or background color alone but without !important. if possible.
– vssadineni
Nov 28 '18 at 6:03