CSS PLAY
Doing It With Style
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
This is a descriptive piece of text for the Wine 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 Wine 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 Wine 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 Wine 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 Wine 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.
The slideshow frames can be selected by click/tapping the square buttons at the bottom of the slideshow and it will continue from that selected slide. The selected images and text will be shown next without having to scroll through the slideshow slides between the current slide and the selected slide.
All the animation is done using transitions and is controlled by two @keyframes animations on the #container div.
The slideshow is responsive and at a browser width of 730px the right hand image is removed.
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.