1

I have some translucent item blocks and I would like show content behind the translucent item block. This is my html code:

.item{
  width: 100px;
  height: 50px;
  background: rgba(1,255,0,0.5);
  backdrop-filter: blur(15px);
  border: 1px solid #ccc;
  position: relative;
  z-index:1;
}
.item:after{
  content: '';
  width: 50px;
  height: 50px;
  position: absolute;
  top: 25px;
  right: -10px;
  background: red;
  z-index: -1;
}
<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

In this code z-index working only for next item blok but for self parent block not worked. So how to set z-index for self parent too?

jsfiddle

Tanner Dolby
  • 4,253
  • 3
  • 10
  • 21
user2772197
  • 205
  • 2
  • 11

1 Answers1

-1

A simple work-around is that you can set the background image of your translucent html element, like so:

.items{
  background-image: IMAGE_LINK
}

Hope that helped.

Kevin George
  • 13
  • 3