CSS selector img:hover:after not being applied

Question

I learned I can use :hover:after so I tried it myself, however it is not working:

.img-shadow img:hover:after {
    -webkit-box-shadow: inset 10px 10px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 10px 10px 10px 0px rgba(0,0,0,0.75);
    box-shadow: inset 10px 10px 10px 0px rgba(0,0,0,0.75);
}

<div class="wpb_single_image wpb_content_element vc_align_left img-shadow">
    <figure class="wpb_wrapper vc_figure">
        <a href="#"><img width="100%" height="auto" src="http://dev.watmar.com.au/wp-content/uploads/2020/10/Power_generation.jpg"></a>
    </figure>
</div>

Does this answer your question? [Does :before not work on img elements?](https://stackoverflow.com/questions/5843035/does-before-not-work-on-img-elements) — buzatto, Jan 04 '21 at 02:59
What are you trying to do actually here? If your aim is to use pseudo-element then you can use it to add content before and after through, `::before` & `::after`. Single colon for pseudo class, double colon for pseudo element. If in the above your aim is to add shadow you can add it directly, you need not use any pseudo-element for that. By using `inset` you can't see the shadow because it is inner side which is not visible, remove `inset` to see the shadow outside the image. — hashBender, Jan 04 '21 at 04:05
That answers my question @hashBender, add an answer if you like. — Steve, Jan 04 '21 at 04:24

score 0 · Accepted Answer · answered Jan 04 '21 at 04:27

What are you trying to do actually here? If your aim is to use pseudo-element then you can use it to add content before and after through, ::before & ::after. Single colon for pseudo class, double colon for pseudo element. If in the above your aim is to add shadow you can add it directly, you need not use any pseudo-element for that. By using inset you can't see the shadow because it is inner side which is not visible, remove inset to see the shadow outside the image.

Masud Rana · Answer 2 · 2021-01-04T06:04:16.550

Hello

Dear If you use :after pseudo selector you should use

content: "";
position: absolute;
width: 100%;
height: 100%;

and its parent tag must use

position: relative;

but in your selected tag is not possible

position: relative;

in this case If you want to use box-shadow: inset 0px 0px 10px 10px rgba(0,0,0,0.75);

You should must use padding inside the element, other wise you can not see the box-shadow.

For more Help you can visit this

Demo

I can try to give you full support.

.img-shadow img {
    transition: all 0.5s;
    padding: 20px;
}
.img-shadow img:hover {
    -webkit-box-shadow: inset 0px 0px 10px 10px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 10px 10px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 10px 10px rgba(0,0,0,0.75);
}

<div class="wpb_single_image wpb_content_element vc_align_left img-shadow">
    <figure class="wpb_wrapper vc_figure">
        <a href="#"><img width="100%" height="auto" src="http://dev.watmar.com.au/wp-content/uploads/2020/10/Power_generation.jpg"></a>
    </figure>
</div>

CSS selector img:hover:after not being applied

2 Answers2

Hello

Demo