I am seeking a solution to target all the pseudo elements of an element that carries the class galleryBlock, as well as a method to target all the pseudo elements of an element with a specific id.
My code structure consists of a grid made up of multiple interconnected boxes, some spanning multiple columns, some spanning multiple rows.
Each box is assigned the class galleryBlock, along with a secondary class — the specific secondary class depends on the box's ratio, as the pseudo elements of these second classes are utilized to provide the box with a particular aspect ratio.
For instance, .square utilizes a pseudo element defined by :after to bestow the box with a square ratio, and so forth.
I aim to have the ability to change the opacity of any .galleryBlock element to 0.5 when hovering over it. Additionally, I wish to be able to customize the color of each pseudo element individually — assigning a distinct color to each pseudo element.
Below is the code snippet I have been experimenting with:
.galleryBlock:hover *:after {
opacity:0.5
}
.galleryBlock *:after {
transition: opacity 0.2s;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
}
#one *:after {
background: linear-gradient(red, blue);
}
#two *:after {
background: linear-gradient(green, yellow);
}
/* more code blocks here */
However, the implementation does not seem to be functioning as expected. I suspect that I am not targeting the pseudo elements correctly. How can I achieve this?