Why does the CSS grayscale filter hide other page elements?

user_646850 0
Viewed 80

Below is code showing three columns with an arrow between each column.

Hover over column one - the arrow head can be seen.

Hover over columns two or three - the arrow head disappears. Why does it disappear?

.col {
  background: #acf;
  border: 1px solid #666;
  display: table-cell;
  width: 125px;
  height: 200px;
}

.col span {
  color: #f00;
  font-size: 3em;
  position: relative;
  top: 80px;
  left: 100px
}

.col:hover {
  filter: grayscale(50%)
}
<p class="col"><span>&#129094;</span></p>
<p class="col"><span>&#129094;</span></p>
<p class="col">&nbsp;</p>

https://codepen.io/d-c/pen/rNxyrqz

grayscale filter css
2 Answers

Try this CSS:

span {
  z-index: 99;
}
user_48282760

add

z-index:1;

to your .col span

And add semicolon to

left: 100px;

.col span {
color:#f00;
font-size:3em;
    position: relative;
    top: 80px;
    left: 100px;
z-index:1;
  
}
user_137849190
Related