prev next icon not visible

[AylwinA]

I have a slideshow working at http://aylwina.github.io/on/photos/. It uses the picture element with ps wrapped in a div and I'm happy with everything but the invisible condition of the span#next. (I used span as div fails, acting as slideshow.)

I used data-cycle-next="#next" in the div starting the slideshow, and set scss to make the span#next z-index 900 and display:block; with an img that shows up in the sites resources, yet nothing shows.

It turns out the #next is turned into an invisible box that covers the right side of the slide. Anything on it is similarly invisible. In the end I used picture:after and set the location to top 10%. This ugly workaround allows responsive images. I now have to create a media query to shrink the monster arrow.

The reason for the invisibility may have something to do with the code that makes the #next box clickable so slides advance. I'd still like to be able to fix it...

Any ideas?

---

in case it helps, here is my scss. .photo-words { //padding-top: 30px; display: block; text-align: justify; max-width: 1200px; margin:2em auto 4em auto; @include columns(18em 3); @include column-gap(30px); }

.slide-host {height: 100%;} picture:before { content: url(/on/images/left_arrow.png); position: absolute; float:left; left: 0; top: 10%; } picture:after { content: url(/on/images/right_arrow.png); position: absolute; float:right; right: 0; top: 10%;
}

slideshow div { display: none }

slideshow div.first { display: block }

next {

display:block;
right: 0;

}

next, #prev {

position: absolute; top: 0; width: 40%; opacity: 0; filter: alpha(opacity=0); z-index: 800; height: 100%; }

[gabrielfin]

Why do you have an opacity: 0; in #next, #prev? If I understand correctly, you say that your prev and next elements are invisible. That is exactly what opacity: 0; does.

[AylwinA]

Thanks, that does explain things. #next & #prev are invisible clickable areas on screen, any visible arrows are cues. I had not realized that the #prev & #next invisibility hid anything on top of them as newOpacity 1 * underlyingOpacity 0 = final opacity 0. Not very helpful. I'll experiment with other ways to hide #prev and #next, like setting their background-color with 0 opacity instead of opacity 0.

What is the standard way to deal with this?

[gabrielfin]

opacity: 0 hides the element and everything inside of it. Why not put the background-image with left_arrow.png and right_arrow.png in #prev and #next?