CODEWITHSUNDEEP
htmlcsscss-selectorsbackground-imageopacity
CSS Apprentice
CSS Apprentice

Reputation: 939

I'm trying to get :after:hover to work

I have a background image that I'm trying to emulate opacity on. opacity:.5; doesn't work, so I decided to add a semi-transparent white square over the top.

.pic:after{
    content:"";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.pic:after:hover{
    content:"";
    background-color: rgba(118, 255, 161, 0.35);
}

What am I missing?

Upvotes: 0

Views: 38

Answers (1)

Weafs.py
Weafs.py

Reputation: 22992

.pic:after is not an element in the DOM. You have to apply the :hover on .pic and then select its :pseudo-element(.pic:hover:after).

.pic:hover:after{
    content:"";
    background-color: rgba(118, 255, 161, 0.35);
}

Upvotes: 1

Related Questions