I want to create a background image slideshow for my photography portfolio. Each image should fade in and link to its respective gallery. I also want the text box to fade with the images and link to the corresponding gallery. The challenge is adding the links without compromising the existing code.
Here is a snippet of my HTML:
<ul class="cb-slideshow">
<li>
<span><a id="gallerylink" href="link1"></a></span>
<div>
<h3>Fire & Light</h3>
</div>
</li>
... (additional list items)
</ul>
This is a portion of my CSS:
#gallerylink {
position: absolute;
display: block;
width: 100%;
height: 100%;
background-color: transparent;
z-index: 999;
}
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
... (other styling properties)
}For more information on the code I used, visit: http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/
The actual links have been removed in this version for posting purposes. Visit the following page for an example: . Any assistance would be greatly appreciated!