Chapter 6 ■ CSS3 Keyframe animationS for Web Content
tuis.
(Tuis.)
#1
To Listing 6-2 and 6-3 you add the markup shown in Listing 6-15.Listing 6-15. CSS Code to Add Captions to an Image Slider
figure#imagestrip figure figcaption {
position: absolute; background: rgba(0,0,0,0.4);
color: #fff; width: 500px; padding: 8px;
font-size: 18px; top: -42px;
transition: 1s top linear;
}
figure#imagestrip:hover { animation-play-state:paused; }
figure#imagestrip figure:hover figcaption { top: 0; }
An On-Click Method for Pause
You can also use the label method discussed earlier to create an alternative method for pausing the slideshow
animation by adding the code shown in Listing 6-16 just after the opening
together with the associated
CSS.
CSS.
Listing 6-16. HTML and CSS Code to Add an On-Click Pause to an Image Slider
label {
display: block; z-index: 24; transition: 0.3s all ease-in-out;
}
input:checked ~ figure#imagestrip {
animation-play-state:paused;
}
input#pause:checked ~ label {
background: rgba(0,0,0,0.4);
}
input#pause:checked ~ label:before {
content: "❚❚"; font-size: 200px;
color: rgba(255,255,255, 0.5);
position: relative;
left: 160px; top: 80px;
}
While the above is an option, keep in mind the accessibility issues discussed earlier in the chapter if you
choose to employ it.