0

Ok so im creating a slideshow effect with CSS3 animations and Im attempting to create links in the div containing the text that slides out to the right as each transition occurs I want different links for each slide. Please help as I need this website to go live as soon as possible. cheers in advance!

CSS/HTML

.slides {
    height:420px;
    margin:50px auto;
    overflow:hidden;
    position:relative;
    width:100%;
	max-width: 1150px;
}
.slides ul {
    list-style:none;
    position:relative;
}


@-webkit-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
@-moz-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

.slides ul li  {
    opacity:0;
    position:absolute;
    top:0;

  
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 16.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 16.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}


.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 4.0s;
    -moz-animation-delay: 4.0s;
}



.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 8.0s;
    -moz-animation-delay: 8.0s;
	
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
	
}
.slides ul li img{
    display:block;
}


@-webkit-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:60%;
        opacity:0;
    }
    20% {
        left:60%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:1;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
@-moz-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:60%;
        opacity:1;
    }
    20% {
        left:60%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}




.slides ul li div {
    background-color:#000000;
    border-radius:10px 10px 10px 10px;
    box-shadow:0 0 5px #FFFFFF inset;
    color:#FFFFFF;
    font-size:26px;
    left:60%;
    margin:0 auto;
    padding:20px;
    position:absolute;
    top:50%;
    width:200px;


    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 16.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_titles;
    -moz-animation-duration: 16.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}
				<div class="slides">
				
				
					<ul> <!-- slides -->
						<li><img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/curiousBabyBoy.png" alt="image01" />
							<div class="hvr-back-pulse">Book a Demo...</div>
						</li>
						<li><img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/mom_baby.png" alt="image02" />
							<div class="hvr-back-pulse">Find Out More...</div>
						</li>
						<li><img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/mom_phone.png" alt="image03" />
							<div class="hvr-back-pulse">Promo text #3</div>
						</li>
						<li><img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/mom_phone.png" alt="image04" />
							<div class="hvr-back-pulse">Promo text #4</div>
						</li>
					</ul>
				</div>

1

4 Answers 4

0

You are using

<li></li>

To make links you have to use anchor tags:

<a href="web address of your link (url)"></a>
2
  • i know that lol the problem is when i add an achor tag the link only works for the last text that comes up (4th element) Mar 3, 2016 at 3:31
  • @SamOgden-Palmer You would avoid this kind of issues if the code that you post had the anchors
    – vals
    Mar 3, 2016 at 10:48
0

I have just added the link for each div.

Here is a working demo

<div class="slides">
                <ul> <!-- slides -->
                    <li><img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/curiousBabyBoy.png" alt="image01" />
                        <div class="hvr-back-pulse"><a href="http://www.google.com">Book a Demo...</a></div>
                    </li>
                    <li><img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/mom_baby.png" alt="image02" />
        <div class="hvr-back-pulse"><a href="http://www.google.com">Find Out More...</a></div>
                    </li>
                    <li><img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/mom_phone.png" alt="image03" />
        <div class="hvr-back-pulse"><a href="http://www.google.com">Promo text #3</a></div>
                    </li>
                    <li><img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/mom_phone.png" alt="image04" />
        <div class="hvr-back-pulse"><a href="http://www.google.com">Promo text #4</a></div>
                    </li>
                </ul>
            </div>
0

You can try wrapping the text inside the divs with a tags and links them.

<div class="slides">


  <ul>
    <!-- slides -->
    <li>
      <img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/curiousBabyBoy.png" alt="image01" />
      <div class="hvr-back-pulse"><a href="link1">Book a Demo...</a>
      </div>
    </li>
    <li>
      <img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/mom_baby.png" alt="image02" />
      <div class="hvr-back-pulse"><a href="link2">Find Out More...</a>
      </div>
    </li>
    <li>
      <img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/mom_phone.png" alt="image03" />
      <div class="hvr-back-pulse"><a href="link3">Promo text #3</a>
      </div>
    </li>
    <li>
      <img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/mom_phone.png" alt="image04" />
      <div class="hvr-back-pulse"><a href="link4">Promo text #4</a>
      </div>
    </li>
  </ul>
</div>

0

.slides {

  height: 420px;

  margin: 50px auto;

  overflow: hidden;

  position: relative;

  width: 100%;

  max-width: 1150px;

}

.slides ul {

  list-style: none;

  position: relative;

}

@-webkit-keyframes anim_slides {

  0% {

    opacity: 0;

  }

  6% {

    opacity: 1;

  }

  24% {

    opacity: 1;

  }

  30% {

    opacity: 0;

  }

  100% {

    opacity: 0;

  }

}

@-moz-keyframes anim_slides {

  0% {

    opacity: 0;

  }

  6% {

    opacity: 1;

  }

  24% {

    opacity: 1;

  }

  30% {

    opacity: 0;

  }

  100% {

    opacity: 0;

  }

}

.slides ul li {

  opacity: 0;

  position: absolute;

  top: 0;

  -webkit-animation-name: anim_slides;

  -webkit-animation-duration: 16.0s;

  -webkit-animation-timing-function: linear;

  -webkit-animation-iteration-count: infinite;

  -webkit-animation-direction: normal;

  -webkit-animation-delay: 0;

  -webkit-animation-play-state: running;

  -webkit-animation-fill-mode: forwards;

  -moz-animation-name: anim_slides;

  -moz-animation-duration: 16.0s;

  -moz-animation-timing-function: linear;

  -moz-animation-iteration-count: infinite;

  -moz-animation-direction: normal;

  -moz-animation-delay: 0;

  -moz-animation-play-state: running;

  -moz-animation-fill-mode: forwards;

}

.slides ul li:nth-child(2),

.slides ul li:nth-child(2) div {

  -webkit-animation-delay: 4.0s;

  -moz-animation-delay: 4.0s;

}

.slides ul li:nth-child(3),

.slides ul li:nth-child(3) div {

  -webkit-animation-delay: 8.0s;

  -moz-animation-delay: 8.0s;

}

.slides ul li:nth-child(4),

.slides ul li:nth-child(4) div {

  -webkit-animation-delay: 12.0s;

  -moz-animation-delay: 12.0s;

}

.slides ul li img {

  display: block;

}

@-webkit-keyframes anim_titles {

  0% {

    left: 100%;

    opacity: 0;

  }

  5% {

    left: 60%;

    opacity: 0;

  }

  20% {

    left: 60%;

    opacity: 1;

  }

  25% {

    left: 100%;

    opacity: 1;

  }

  100% {

    left: 100%;

    opacity: 0;

  }

}

@-moz-keyframes anim_titles {

  0% {

    left: 100%;

    opacity: 0;

  }

  5% {

    left: 60%;

    opacity: 1;

  }

  20% {

    left: 60%;

    opacity: 1;

  }

  25% {

    left: 100%;

    opacity: 0;

  }

  100% {

    left: 100%;

    opacity: 0;

  }

}

.slides ul li div {

  background-color: #000000;

  border-radius: 10px 10px 10px 10px;

  box-shadow: 0 0 5px #FFFFFF inset;

  color: #FFFFFF;

  font-size: 26px;

  left: 60%;

  margin: 0 auto;

  padding: 20px;

  position: absolute;

  top: 50%;

  width: 200px;

  -webkit-animation-name: anim_titles;

  -webkit-animation-duration: 16.0s;

  -webkit-animation-timing-function: linear;

  -webkit-animation-iteration-count: infinite;

  -webkit-animation-direction: normal;

  -webkit-animation-delay: 0;

  -webkit-animation-play-state: running;

  -webkit-animation-fill-mode: forwards;

  -moz-animation-name: anim_titles;

  -moz-animation-duration: 16.0s;

  -moz-animation-timing-function: linear;

  -moz-animation-iteration-count: infinite;

  -moz-animation-direction: normal;

  -moz-animation-delay: 0;

  -moz-animation-play-state: running;

  -moz-animation-fill-mode: forwards;

}
<html>

<head>
</head>

<body>

  <div class="slides">


    <ul>
      <!-- slides -->
      <li>
        <img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/curiousBabyBoy.png" alt="image01" />
        <div class="hvr-back-pulse"><a href="1" class="demo">Book a Demo...</a>
        </div>
      </li>
      <li>
        <img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/mom_baby.png" alt="image02" />
        <div class="hvr-back-pulse"><a href="2" class="demo">Find Out More...</a>
        </div>
      </li>
      <li>
        <img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/mom_phone.png" alt="image03" />
        <div class="hvr-back-pulse"><a href="3" class="demo">Promo text #3</a>
        </div>
      </li>
      <li>
        <img src="http://www.weebly.com/editor/uploads/2/1/5/2/21528596/custom_themes/981467400795039554/files/mom_phone.png" alt="image04" />
        <div class="hvr-back-pulse"><a href="4" class="demo">Promo text #4</a>
        </div>
      </li>
    </ul>
  </div>
</body>

</html>

If you notice the problem is that when you click on any of the links they all point to the link text on the 4th slide.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.