Disable css filter effects on pseudo elements

Hi, So I work in Wordpress using the Divi theme: I'd like to have a hovereffect with some filters ( brightness, blur etc) on my module, but not have effect on my before and after. Look at the provided images, one is on hover, one is when i'm not hovering The text is my before and after
No description
No description
9 Replies
Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋
Page i'm working on: https://www.macqueen.be/home-testing/ My code so far:
<style>
.events{
aspect-ratio: 2 / 1.5;
height: auto;
transition: 300ms !important;
background-size: 130%;
}
.events:hover{
background-size: 170%;
}
.events::before,
.events::after {
white-space: pre;
position: absolute;
padding: 20px;
}
.events::before{
text-transform: uppercase;
inset: 0px;
font-size: 1.5vw;
line-height: 1.2em;
background-image: url("https://www.macqueen.be/wp-content/uploads/2022/06/Background-blue-white_-.png");
}
.events::after{
content: "Meer foto's";
bottom: 0px;
right: 0px;
font-size: 1.1vw;
}
</style>
<style>
.events{
aspect-ratio: 2 / 1.5;
height: auto;
transition: 300ms !important;
background-size: 130%;
}
.events:hover{
background-size: 170%;
}
.events::before,
.events::after {
white-space: pre;
position: absolute;
padding: 20px;
}
.events::before{
text-transform: uppercase;
inset: 0px;
font-size: 1.5vw;
line-height: 1.2em;
background-image: url("https://www.macqueen.be/wp-content/uploads/2022/06/Background-blue-white_-.png");
}
.events::after{
content: "Meer foto's";
bottom: 0px;
right: 0px;
font-size: 1.1vw;
}
</style>
Zoë
Zoë14mo ago
You can't disable them on pseudo elements. You need to change the layout
container
text
image_container <- apply filter here
img
container
text
image_container <- apply filter here
img
While I'm here. It's better to be more explicit with text, not hiding important text into content just to have fewer elements
Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋
I see, never thought of that! thank you It's solved! Same link for example ( it might be deleted tomorrow ) I use this css now:
<style>
.col{
overflow:hidden;
}
.events img{
aspect-ratio: 2 / 1.5;
height: auto;
transition: 300ms;
}
.events:hover img{
transform: scale(1.3);
filter: brightness(140%) contrast(200%) blur(1px);
}
.events::before,
.events::after {
white-space: pre;
position: absolute;
padding: 1.3vw;
z-index: 1;
line-height: 1em;
pointer-events: none;
}
.events::before{
text-transform: uppercase;
inset: 0px;
font-size: 1.5vw;
background-image: url("https://www.macqueen.be/wp-content/uploads/2022/06/Background-blue-white_-.png");
}
.events::after{
content: "Meer foto's";
bottom: 0px;
right: 0px;
font-size: 1.1vw;
}
</style>
<style>
.col{
overflow:hidden;
}
.events img{
aspect-ratio: 2 / 1.5;
height: auto;
transition: 300ms;
}
.events:hover img{
transform: scale(1.3);
filter: brightness(140%) contrast(200%) blur(1px);
}
.events::before,
.events::after {
white-space: pre;
position: absolute;
padding: 1.3vw;
z-index: 1;
line-height: 1em;
pointer-events: none;
}
.events::before{
text-transform: uppercase;
inset: 0px;
font-size: 1.5vw;
background-image: url("https://www.macqueen.be/wp-content/uploads/2022/06/Background-blue-white_-.png");
}
.events::after{
content: "Meer foto's";
bottom: 0px;
right: 0px;
font-size: 1.1vw;
}
</style>
also, about the content, in the divi module i have the remaining content rule, I made it like this so that when we need to change that content (every week we do that), it's easier to find and change.
Zoë
Zoë14mo ago
I see
Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋
thanks for the help!
MarkBoots
MarkBoots14mo ago
just wanted to play with it a bit. So here another option, without the use of pseudo elements, and stacking by grid instead of absolute positions https://codepen.io/MarkBoots/pen/qBLQqEm?editors=1100
Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋
what is the difference with • transform: scale(1.3); • scale: 1.3;
MarkBoots
MarkBoots14mo ago
Not that much, for a while now some of the transform-properties can be used as a normal property (translate, rotate and scale). But, if you want to combine them, you should keep in mind there is an order in which they are applied: translate -> rotate -> scale if you want a different order and/or use multiples of the same one, the transform is more useful
Zoë
Zoë14mo ago
It’s really useful for animating specific transform properties while not touching others
Want results from more Discord servers?
Add your server