Kevin Powell - Community•14mo ago

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

9 Replies

Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋OP•14mo ago

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ë•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

Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋OP•14mo ago

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ë•14mo ago

I see

Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋OP•14mo ago

thanks for the help!

MarkBoots•14mo 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

Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋OP•14mo ago

what is the difference with • transform: scale(1.3); • scale: 1.3;

MarkBoots•14mo 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ë•14mo ago

It’s really useful for animating specific transform properties while not touching others

Gaming

Programming

Disable css filter effects on pseudo elements