Question

So I have a purely stylistic div with a :before that sits under an image, with the css looking like this:

.the-image-div {
    width: 100px;
    height: 100px;
    box-shadow: inset 0px 0px 3px white;
    border: 1px gray solid;
    position: relative;
    z-index: 3;
}

.image-stack {
    width: 100px;
    height: 100px;
    background: white;
    border: 1px solid gray;
    position: relative;
    top:3px;
    left: 3px;
    z-index: 2;
}

.image-stack:before {
    content: " ";
    width: 100px;
    height: 100px;
    background: white;
    border: 1px solid gray;
    box-shadow: inset 0px 0px 1px white;
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 1;
}

It would be nice to have jquery select not only the image-stack but the :before separately. The goal would be to fade it in a few milliseconds after the image-stack itself. Ideas?

Answer 1

JavaScript can’t interact with pseudo elements. I would instead have the :before applied to a class that is added to the element afterwards then use CSS transitions to make it fade in.