CSS Filter removes H1

Question

I'm trying to overlay an h1 over an image, using Grid; for better contrast, I thought about using filter:brightness(80%) on the image, which, unfortunately, removes the h1 altogether.

Is there any workaround to this? ( without pasting in image URLs in CSS) (filter is commented for you to apply and see)

body{
  background: grey;
  margin: 10px;
  color: white;
  text-align: center;
}
img{
  max-width: 100%;
  max-height: 100%;
}
.gridcontainer{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  max-width: 100vw;
  align-items: center;
}

.griditem{
  background: black;
}

.headingcover{
  grid-column: 1/3;
  grid-row: 1/2;
  /* filter: brightness(80%); */
}
h1{
  grid-column: 1/3;
  grid-row: 1/2;
}

  <div class="gridcontainer">
    <img src="https://source.unsplash.com/7TGVEgcTKlY" alt="" class="headingcover">
    <div class="griditem b">b</div>
    <div class="griditem c">c</div>
    <div class="griditem d">d</div>
    <h1>Foxy</h1>
  </div>

When you use any value for `filter` you create a new stacking order. — I haz kode, Sep 26 '17 at 15:04
Add `z-index:1` to `h1`. It seems that `filter` causes the `img` create separate stacking context so it overrides sibling elements without `z-index`. — Ilya Streltsyn, Sep 26 '17 at 15:35

score 0 · Answer 1 · answered Sep 26 '17 at 15:11

0

other than filter you can use text-shadow property of css for better contrast.

answered Sep 26 '17 at 15:11

Yo Yo GOD G

11
4

score 0 · Answer 2 · answered Sep 27 '17 at 00:21

0

Try adding a z-index to your h1 to put it above your filter in the element stack.

h1 { 
    grid-column: 1/3; 
    grid-row: 1/2;
    z-index: 10;
}

answered Sep 27 '17 at 00:21

Coffee bean

1,474
15
27

CSS Filter removes H1

2 Answers2