How to make links clickable when they are behind a `<div>`

Question

How to make the gradient appear on top of the pictures and the links are clickable at the same time?

The gradient needs to be sticky while scrolling. Is it possible to do that? Currently, the scroll bar isn't working as well..

 .container{ position: relative; } .image-dog { width:200px; height:100px; } a:hover{ cursor:pointer; } .directory { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; justify-content: space-between; white-space: nowrap; scroll-behavior: smooth; } .gradient { width: 100%; height: 100%; left: 0; top: 0; right: 0; background-image: linear-gradient(to right, red 1%, rgba(255, 255, 255, 0) 4%, rgba(255, 255, 255, 0) 85%, blue 100%); position: absolute; z-index: 100; }

 <div class="container"> <div class="directory"> <div class="gradient"> </div> <div class="owner"> <a class="image-dog" href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a> <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a> <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a> <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a> </div> </div> </div>

Answer 1

<style> 
.container{
  position: relative;
  top: -20px;
}
.image-dog {
  width:200px;
  height:100px;
}
a:hover{
  cursor:pointer;
}

.directory {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  justify-content: space-between;
  white-space: nowrap;
  scroll-behavior: smooth;
}

.gradient {
    width: 100%;
    height: 20px;
    left: 0;
    top: 0;
    right: 0;
    background-image: linear-gradient(to right, red 1%, rgba(255, 255, 255, 0) 4%, rgba(255, 255, 255, 0) 85%, blue 100%);
    position: sticky;
    z-index: 999;
}

</style>

 <div class="gradient">
            </div>
        <div class="container">
                <div class="directory">

                  <div class="owner">
                      <a class="image-dog" href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a>
                      <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a>
                      <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a>
                      <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a>
                  </div>

                </div>
              </div>

Answer 2

Just apply pointer-events: none; to your gradient to make it 'click-through':

 .container { position: relative; } .image-dog { width: 200px; height: 100px; } a:hover { cursor: pointer; } .directory { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; justify-content: space-between; white-space: nowrap; scroll-behavior: smooth; } .gradient { width: 100%; height: 100%; left: 0; top: 0; right: 0; background-image: linear-gradient(to right, red 1%, rgba(255, 255, 255, 0) 4%, rgba(255, 255, 255, 0) 85%, blue 100%); position: absolute; z-index: 100; pointer-events: none; }

 <div class="container"> <div class="directory"> <div class="gradient"> </div> <div class="owner"> <a class="image-dog" href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a> <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a> <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a> <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a> </div> </div> </div>