To prevent getting scroll bars on a lower resolutions screen, I decided to do it as a background image and since I had five images that I wanted to show in a slideshow I found a background image slide show.
The problem I've got is a need to make the image link to something and putting an anchor on the image was the best options. I tried it with text first and although it shows the text underlined as a link, I can't click it and the pointer doesn't change.
Could anybody have a look at the code please and either let me know how I can make the link work or even better where I can find a more user friendly, background image slideshow that can have a fading transition and a custom speed?
HTML
Expand|Select|Wrap|Line Numbers
- <div style="height: 388px; width: 100%;">
- <ul class="cb-slideshow">
- <li>
- <span>Image 01</span>
- <div>
- <h3>
- </h3>
- </div>
- </li>
- <li>
- <span>Image 02</span>
- <div>
- <h3>
- </h3>
- </div>
- </li>
- <li>
- <span>Image 03</span>
- <div>
- <h3 style="cursor:pointer !important;">
- <a href="link">Dogs were invented before the wheel</a></h3>
- </div>
- </li>
- <li>
- <span>Image 04</span>
- <div>
- <h3>
- </h3>
- </div>
- </li>
- <li>
- <span>Image 05</span>
- <div>
- <h3>
- </h3>
- </div>
- </li>
- <!--
- <li>
- <span>Image 06</span>
- <div>
- <h3>
- </h3>
- </div>
- </li>-->
- </ul>
- </div>
Expand|Select|Wrap|Line Numbers
- .cb-slideshow,
- .cb-slideshow:after {
- margin-bottom: 0 !important;
- }
- .cb-slideshow:after {
- content: '';
- }
- .cb-slideshow li span {
- width: 100%;
- height: 395px;
- position: absolute;
- top: 135px;
- left: 0px;
- color: transparent;
- background-size: cover;
- background-position: 50% 50%;
- background-repeat: no-repeat;
- opacity: 0;
- z-index: 0;
- -webkit-backface-visibility: hidden;
- -webkit-animation: imageAnimation 30s linear infinite 0s;
- -moz-animation: imageAnimation 30s linear infinite 0s;
- -o-animation: imageAnimation 30s linear infinite 0s;
- -ms-animation: imageAnimation 30s linear infinite 0s;
- animation: imageAnimation 30s linear infinite 0s;
- }
- .cb-slideshow li div {
- z-index: 1000;
- position: absolute;
- bottom: 30px;
- left: 0px;
- width: 100%;
- text-align: center;
- opacity: 0;
- color: #fff;
- -webkit-animation: titleAnimation 30s linear infinite 0s;
- -moz-animation: titleAnimation 30s linear infinite 0s;
- -o-animation: titleAnimation 30s linear infinite 0s;
- -ms-animation: titleAnimation 30s linear infinite 0s;
- animation: titleAnimation 30s linear infinite 0s;
- }
- .cb-slideshow li div h3 {
- font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
- font-size: 240px;
- padding: 0;
- line-height: 200px;
- display: block;
- z-index: 9000000;
- }
- .cb-slideshow li:nth-child(1) span {
- background-image: url(image1);
- }
- .cb-slideshow li:nth-child(2) span {
- background-image: url(image2);
- -webkit-animation-delay: 6s;
- -moz-animation-delay: 6s;
- -o-animation-delay: 6s;
- -ms-animation-delay: 6s;
- animation-delay: 6s;
- }
- .cb-slideshow li:nth-child(3) span {
- background-image: url(image3);
- -webkit-animation-delay: 12s;
- -moz-animation-delay: 12s;
- -o-animation-delay: 12s;
- -ms-animation-delay: 12s;
- animation-delay: 12s;
- }
- .cb-slideshow li:nth-child(4) span {
- background-image: url(image4);
- -webkit-animation-delay: 18s;
- -moz-animation-delay: 18s;
- -o-animation-delay: 18s;
- -ms-animation-delay: 18s;
- animation-delay: 18s;
- }
- .cb-slideshow li:nth-child(5) span {
- background-image: url(image5);
- -webkit-animation-delay: 24s;
- -moz-animation-delay: 24s;
- -o-animation-delay: 24s;
- -ms-animation-delay: 24s;
- animation-delay: 24s;
- }
- .cb-slideshow li:nth-child(6) span {
- background-image: url(image to come);
- -webkit-animation-delay: 30s;
- -moz-animation-delay: 30s;
- -o-animation-delay: 30s;
- -ms-animation-delay: 30s;
- animation-delay: 30s;
- }
- .cb-slideshow li:nth-child(2) div {
- -webkit-animation-delay: 6s;
- -moz-animation-delay: 6s;
- -o-animation-delay: 6s;
- -ms-animation-delay: 6s;
- animation-delay: 6s;
- }
- .cb-slideshow li:nth-child(3) div {
- -webkit-animation-delay: 12s;
- -moz-animation-delay: 12s;
- -o-animation-delay: 12s;
- -ms-animation-delay: 12s;
- animation-delay: 12s;
- }
- .cb-slideshow li:nth-child(4) div {
- -webkit-animation-delay: 18s;
- -moz-animation-delay: 18s;
- -o-animation-delay: 18s;
- -ms-animation-delay: 18s;
- animation-delay: 18s;
- }
- .cb-slideshow li:nth-child(5) div {
- -webkit-animation-delay: 24s;
- -moz-animation-delay: 24s;
- -o-animation-delay: 24s;
- -ms-animation-delay: 24s;
- animation-delay: 24s;
- }
- .cb-slideshow 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 }
- }
- /* Show at least something when animations not supported */
- .no-cssanimations .cb-slideshow li span{
- opacity: 1;
- }
- @media screen and (max-width: 1140px) {
- .cb-slideshow li div h3 { font-size: 140px }
- }
- @media screen and (max-width: 600px) {
- .cb-slideshow li div h3 { font-size: 80px }
- }