Skip navigation
Currently Being Moderated

Overlapping image hidden in HTML/CSS slideshow

May 3, 2013 9:42 AM

Tags: #image #css #overlap #slideshow #hidden #z-index

I'm attempting to create a simple slideshow with HTML / CSS / Jquery. I followed this tutorial -


Here's my page (the slideshow is on the bottom image):


If you hover over the left or right side of the bottom image, you'll see you can advance the images upon clicking. So the slideshow is functional - however there are supposed to be forward/back arrow buttons on the left and right that are hidden for some reason. (These are in the image file "slideshow-btns.png").


I tried changing the z-index on the button and adding one to the slideshow itself, but it did nothing. Here's a sample of the button style:


#container .prevButton{




          background:url('slideshow/slideshow-btns.png') no-repeat;





          background-position:left top;




Any idea how I can get it to show?

  • Currently Being Moderated
    May 3, 2013 2:03 PM   in reply to x_defect

    No slideshow that I can see.  Are you sure you uploaded the correct page?



    Nancy O.

    Mark as:
  • Currently Being Moderated
    May 3, 2013 2:44 PM   in reply to x_defect

    OK.  Start by fixing your code errors. com%2Fphotos.html


    You have a malformed comment starting on  line 27 and ending on line 51 that's causing some problems.







    <!--begin comment

    end comment-->




    Nancy O.


    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points