css3 - Text isn't selectable on website, possibly masked by css -

css3 - Text isn't selectable on website, possibly masked by css -

currently i'm developing simple website on experiment lot modern css techniques animations , transition. after implementing planned animations, body texts aren't selectable anymore. think element masking text, can't find it. if point me in right direction help me lot.

you can check dev version on the-outsiders.nl, below snippet of sass i'm using.

thx in advance!

.slider { position: absolute; top: 0; left: 0; z-index: -1; margin: 0; li { span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 1; z-index: -1; @include animation(0s, 25s, imageanimation); } div { z-index: 1; position: absolute; bottom: 30px; right: 0px; min-width: 20em; text-align: left; opacity: 1; color: #fff; @include animation(0s, 25s, titleanimation); } } } .slider, .slider:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: -1; } @include keyframe(imageanimation) { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; @include transform(scale(1.025)); animation-timing-function: ease-out; } 100% { opacity: 1; @include transform(scale(1.15)); animation-timing-function: ease-out; } } @include keyframe(titleanimation) { 0% { opacity: 0 } 17% { opacity: 1 } }

slider has z-index: -1; in 2 places.

once take out 2 z-index, should able select bottom text.

css css3 css-animations