Is there a way I can insert an additional image directly behind my existing image using a pseudo element before or after? I tried it but it doesn't seem to be working. Are there any alternative methods I could try

Question

Is there a way I can insert an additional image directly behind my existing image using a pseudo element before or after? I tried it but it doesn't seem to be working. Are there any alternative methods I could try

Currently, I am attempting to include an additional image behind my current image by using a pseudo-element before, but unfortunately, it seems to not be working as expected. Are there any alternative methods to successfully add an image behind the original one?

.hero-sub-2 img {
  position      : relative;
  width         : 166%;
  height        : 430px;
  border-radius : 20px;
  left          : 43px;
  top           : 50px;
  overflow      : hidden;
  }
.hero-sub-2 img::before {
  content          : "";
  position         : absolute;
  display          : block;
  width            : 100%;
  height           : 100%;
  background-image : url('/img/360_F_297885365_QNMAlCRXZSHMd0MX5v9QJcP2KhHLLYDc.jpeg');
  top              : 0;
  left             : 0;
  background-size  : cover;
  }

https://i.sstatic.net/PetvK.png

html css css-selectors pseudo-element

Answer 1

Answer №1

The img element does not support the use of ::before or ::after pseudo-elements. To achieve a similar effect, consider using a div element instead. Additionally, if you want to layer one element behind the other, you can utilize a negative z-index for the pseudo-element.

.front {
  width: 200px; 
  height: 100px;
  background-image: url(https://picsum.photos/200/100);
  position:relative; 
  border: 1px solid red;

}

.front::before {
  position:absolute;
  content: "";
  width: 200px;
  height: 100px;
  left: 20px;
  top: 20px;
  z-index: -1;
  border: 1px solid blue;
  background: url(https://picsum.photos/200/101);
  
  
}

<div class="front">
</div>

Answer 2

The img element does not support the use of ::before or ::after pseudo-elements. To achieve a similar effect, consider using a div element instead. Additionally, if you want to layer one element behind the other, you can utilize a negative z-index for the pseudo-element.

.front {
  width: 200px; 
  height: 100px;
  background-image: url(https://picsum.photos/200/100);
  position:relative; 
  border: 1px solid red;

}

.front::before {
  position:absolute;
  content: "";
  width: 200px;
  height: 100px;
  left: 20px;
  top: 20px;
  z-index: -1;
  border: 1px solid blue;
  background: url(https://picsum.photos/200/101);
  
  
}

<div class="front">
</div>

Is there a way I can insert an additional image directly behind my existing image using a pseudo element before or after? I tried it but it doesn't seem to be working. Are there any alternative methods I could try

Answer №1

Similar questions

Utilize JavaScript to append a CSS class to a dynamic unordered list item anchor element

The flipping action will only occur on the initial card

What are the drawbacks of utilizing CSS word-wrap across all elements on a website?

Adjusting the opacity of images in a Bootstrap 4 Jumbotron without affecting the text

At what browser width does Bootstrap's container no longer display a border?

What could be causing the malfunction of the dropdown menu attached to my button?

Adjust iFrame size if the width of the screen is lower than x

Changing the CSS Border of Thumbnails

The Google Rich Result Testing Tool encountered an issue: Parsing error detected - a '}' or object member name is missing

Enhance the functionality of the kendo grid by incorporating additional buttons or links that appear when the

The iPage server has encountered a 403 Forbidden Error, preventing

What is the best way to adjust the width of a navbar using JavaScript?

What is the best method for initializing Bootstrap data attributes API?

Modify the MUI Select icon background color on hover

Duplicate label issue with 'No files chosen' message on Bootstrap form control

Nesting CSS classes allows for more specific targeting of

Personalize scrollbar appearance in Mozilla Firefox and Internet Explorer

Restricting HTML Code within a DIV Container

Is there a way for me to extend an absolute div to the full width of its grandparent when it is within an absolute parent div?

Order of tabs, dialog, and forms customization using Jquery UI