1

I have web application with some more pages and i cant change the all pages, but i can change the css code.

I have a img with "thumbnail" tag with css class to show the image.

i want to show a box over image with css.

.thumbnail {position:relative;width:128px;height:128px;}
.thumbnail:after {position:absolute;width:20px;height:128px;top:0px;right:0px;background-color:#ff0;content:" ";z-index:100;}
<img class="thumbnail" src="http://mrizvandi.com/Media/Image/QRCode/ContactInfo.jpg" />

When i use the :after in css, i cant see any effect!

Is there any solution to show overlay box without additional tag and just use css?

Thanks In Advance.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
mRizvandi
  • 983
  • 1
  • 8
  • 20

2 Answers2

1

This is not possible. Replaced elements could not have ::before and ::after pseudo-elements.

Replaced content

If the computed value of the part of the 'content' property that ends up being used is a single URI, then the element or pseudo-element is a replaced element. The box model defines different rules for the layout of replaced elements than normal elements. Replaced elements do not have '::before' and '::after' pseudo-elements; the 'content' property in the case of replaced content replaces the entire contents of the element's box.

To insert text around replaced content, '::outside::before' and '::outside::after' may be used.

You could solve the problem by selecting a parent element to place the pseudo-element.

Reference: w3.org - Generated and Replaced Content Module - Replaced content

emmanuel
  • 9,607
  • 10
  • 25
  • 38
0

Because of browser behavior and css rules, i change my strategy, and change all pages ;)

Add a div as container for image. with style "position:relative"

Add image as child of div.

Add :after class to container.

.thumbnail {position:relative;width:128px;height:128px;}
.thumbnail:after {position:absolute;width:20px;height:128px;top:0px;right:0px;background-color:rgba(255,0,0,0.5);content:" ";z-index:100;}
.thumbnail>img {width:128px;height:128px;}
<div class="thumbnail">
  <img src="http://mrizvandi.com/Media/Image/QRCode/ContactInfo.jpg" />
</div>

Thanks to all friends

mRizvandi
  • 983
  • 1
  • 8
  • 20