A Pen by Andrew Kirchmyer.

css-scrolling-marquee-and-overlays.markdown

css scrolling marquee and overlays

A Pen by Andrew Kirchmyer on CodePen.

License.

index.html

Notice the links are not highlighting under the ovelay
<div class="wrap">
    <div class="overlay overlay1"></div>
        <div class="overlay overlay2"></div>
<ul class="mylist">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a>
    </li>
    <li><a href="#">Item 3</a>
    </li>
    <li><a href="#">Item 4</a>
    </li>
    <li><a href="#">Item 5</a>
    </li>
    <li><a href="#">Item 6</a>
    </li>
    <li><a href="#">Item 7</a>
    </li>
    <li><a href="#">Item 8</a>
    </li>
        <li><a href="#">Item 9</a>
    </li>
        <li><a href="#">Item 10</a>
    </li>
        <li><a href="#">Item 11</a>
    </li>
        <li><a href="#">Item 12</a>
    </li>
        <li><a href="#">Item 13</a>
    </li>
        <li><a href="#">Item 14</a>
    </li>
</ul>
    
</div>



If you add pointer-events: none to the overlay, the overlays will no longer get in the way, as if they do not exist.



<div class="wrap">
    <div class="overlay nonexistent overlay1"></div>
        <div class="overlay nonexistent overlay2"></div>
<ul class="mylist">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a>
    </li>
    <li><a href="#">Item 3</a>
    </li>
    <li><a href="#">Item 4</a>
    </li>
    <li><a href="#">Item 5</a>
    </li>
    <li><a href="#">Item 6</a>
    </li>
    <li><a href="#">Item 7</a>
    </li>
    <li><a href="#">Item 8</a>
    </li>
        <li><a href="#">Item 9</a>
    </li>
        <li><a href="#">Item 10</a>
    </li>
        <li><a href="#">Item 11</a>
    </li>
        <li><a href="#">Item 12</a>
    </li>
        <li><a href="#">Item 13</a>
    </li>
        <li><a href="#">Item 14</a>
    </li>
</ul>
    
</div>

This is useful for 

<ul>
    <li>modal windows.</li>
    <li>adding button-like elements on top of select boxes.</li>
    <li>clicking through stylistic overlays like in the example.</li>
</ul>

style.css

body {
    background-color: #4CB3FF;
}
.wrap{
    position: relative;
}
.overlay {
    position: absolute;
    width: 50px;
    background-color: black;
    height: 1.3em;
    opacity: .5;
}
.overlay1 {
    left: 0;
}
.overlay2 {
    right: 0;
}
.mylist {
    background-color: #00497F;
    color: #DDFFFF;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}
.mylist li {
    display: inline;
}
.mylist li a {
    color: #DDFFFF;
    text-decoration: none;
}
.mylist li a:hover {
    color: red;
}
.mylist li:nth-child(1) {
    -webkit-animation: slidein 10s linear infinite;
}

@-webkit-keyframes slidein {
  from{
      margin-left: 100%;
  }
  to{
        margin-left: -340%;
  }
}

.nonexistent {
    pointer-events: none;
}