Hi,
could someone help...
I've got this full screen slideshow and I want to make each of the background images clickable with URL's.
Tried lots of combo's with <a href...> but couldn't get it working.
What am I doing wrong or am I missing?
Thanks for your help.
HTML
CSS
could someone help...
I've got this full screen slideshow and I want to make each of the background images clickable with URL's.
Tried lots of combo's with <a href...> but couldn't get it working.
What am I doing wrong or am I missing?
Thanks for your help.
HTML
Code:
<content>
<ul class="fullPageSlideShow">
<li><span>Image 01</span><div><h3>CURRENTLY PLAYING</h3></div></li>
<li><span>Image 02</span><div><h3>COMPLETED</h3></div></li>
<li><span>Image 03</span><div><h3>OUTSOON</h3></div></li>
<li><span>Image 04</span><div><h3>CHEATS</h3></div></li>
<li><span>Image 05</span><div><h3>FILE</h3></div></li>
<li><span>Image 06</span><div><h3>SCREEN</h3></div></li>
</ul>
</content><!--content-->
CSS
Code:
.fullPageSlideShow,
.fullPageSlideShow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.fullPageSlideShow:after {
content: '';
background: transparent url(../SLIDERGALLERY/sliderImages/pattern.png) repeat top left;
}
.fullPageSlideShow li span {
display: block;
width: 100%;
height: 85%;
position: absolute;
top: 15%;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.fullPageSlideShow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.fullPageSlideShow li div h3 {
font-family: 'bebas_neueregular', 'Arial Narrow', Arial, sans-serif;
font-size: 150px;
padding: 0;
line-height: 200px;
text-shadow:10px 10px 10px #000;
}
.fullPageSlideShow li:nth-child(1) span {
background-image: url(../SLIDERGALLERY/sliderImages/1.jpg);
}
.fullPageSlideShow li:nth-child(2) span {
background-image: url(../SLIDERGALLERY/sliderImages/2.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.fullPageSlideShow li:nth-child(3) span {
background-image: url(../SLIDERGALLERY/sliderImages/3.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.fullPageSlideShow li:nth-child(4) span {
background-image: url(../SLIDERGALLERY/sliderImages/4.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.fullPageSlideShow li:nth-child(5) span {
background-image: url(../SLIDERGALLERY/sliderImages/5.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.fullPageSlideShow li:nth-child(6) span {
background-image: url(../SLIDERGALLERY/sliderImages/6.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.fullPageSlideShow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.fullPageSlideShow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.fullPageSlideShow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.fullPageSlideShow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.fullPageSlideShow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}