CSS PLAY
Doing It With Style
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
This is a descriptive piece of text for the cosmetic brand, and can be as long as you like providing it fits within this area of the screen.
This is a descriptive piece of text for the cosmetic brand, and can be as long as you like providing it fits within this area of the screen.
This is a descriptive piece of text for the cosmetic brand, and can be as long as you like providing it fits within this area of the screen.
This is a descriptive piece of text for the cosmetic brand, and can be as long as you like providing it fits within this area of the screen.
This is a descriptive piece of text for the cosmetic brand, and can be as long as you like providing it fits within this area of the screen.
The CSS Play method of controlling a CSS ONLY slideshow using @container queries.
This version uses no inputs. No checkboxes, radio inputs or buttons. This uses just :focus.
The slideshow frames can be selected by click/tapping the square buttons in the center of the slideshow and it will continue from that selected image.
Click/tap off the slideshow to reset it to its original start position.
All the animation is done using transitions and is controlled by two @keyframes animations on the #container div.
The two @keyframes animations are identical and very basic @keyframes slide1a {0% {width:10px;} 100% {width:70px;}}
and
@keyframes slide1b {0% {width:10px;} 100% {width:70px;}}.
This slideshow is responsive and on small screens, less that 500px, the text slides will drop below the image slides and the two slides will scroll horizontally in opposite directions.
If you want to use this slideshow in your website design please keep the copyright comment in the stylesheet and make a support donation using the PayPal button below. Every little helps in keeping this website going.