Last active
November 21, 2016 17:24
-
-
Save leemark/11237860 to your computer and use it in GitHub Desktop.
prefixed CSS for slideshow example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* http://themarklee.com/2013/10/16/simple-crossfading-slideshow-css/ */ | |
| .css-slideshow { | |
| position: relative; | |
| max-width: 495px; | |
| height: 370px; | |
| margin: 1em auto .5em auto; | |
| font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; | |
| font-weight: 300; | |
| } | |
| .css-slideshow figure { | |
| margin: 0; | |
| max-width: 495px; | |
| height: 370px; | |
| background: #fff; | |
| position: absolute; | |
| } | |
| .css-slideshow img { | |
| -webkit-box-shadow: 0 0 2px #666; | |
| box-shadow: 0 0 2px #666; | |
| } | |
| .css-slideshow figcaption { | |
| position: absolute; | |
| top: 5px; | |
| color: #fff; | |
| background: rgba(0,0,0, .3); | |
| font-size: .8em; | |
| padding: 8px 12px; | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| -webkit-transition: opacity .5s; | |
| -moz-transition: opacity .5s; | |
| -o-transition: opacity .5s; | |
| -ms-transition: opacity .5s; | |
| transition: opacity .5s; | |
| } | |
| .css-slideshow:hover figure figcaption { | |
| -webkit-transition: opacity .5s; | |
| -moz-transition: opacity .5s; | |
| -o-transition: opacity .5s; | |
| -ms-transition: opacity .5s; | |
| transition: opacity .5s; | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| .css-slideshow-attr { | |
| max-width: 530px; | |
| text-align: right; | |
| font-size: .7em; | |
| font-style: italic; | |
| } | |
| .css-slideshow-attr a { | |
| color: #666; | |
| } | |
| .css-slideshow figure:nth-child(1),.css-slideshow figure:nth-child(2),.css-slideshow figure:nth-child(3),.css-slideshow figure:nth-child(4),.css-slideshow figure:nth-child(5),.css-slideshow figure:nth-child(6),.css-slideshow figure:nth-child(7) { | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| } | |
| .css-slideshow figure:nth-child(1) { | |
| -webkit-animation: xfade 48s 42s infinite; | |
| -moz-animation: xfade 48s 42s infinite; | |
| -ms-animation: xfade 48s 42s infinite; | |
| -o-animation: xfade 48s 42s infinite; | |
| animation: xfade 48s 42s infinite; | |
| } | |
| .css-slideshow figure:nth-child(2) { | |
| -webkit-animation: xfade 48s 36s infinite; | |
| -moz-animation: xfade 48s 36s infinite; | |
| -ms-animation: xfade 48s 36s infinite; | |
| -o-animation: xfade 48s 36s infinite; | |
| animation: xfade 48s 36s infinite; | |
| } | |
| .css-slideshow figure:nth-child(3) { | |
| -webkit-animation: xfade 48s 30s infinite; | |
| -moz-animation: xfade 48s 30s infinite; | |
| -ms-animation: xfade 48s 30s infinite; | |
| -o-animation: xfade 48s 30s infinite; | |
| animation: xfade 48s 30s infinite; | |
| } | |
| .css-slideshow figure:nth-child(4) { | |
| -webkit-animation: xfade 48s 24s infinite; | |
| -moz-animation: xfade 48s 24s infinite; | |
| -ms-animation: xfade 48s 24s infinite; | |
| -o-animation: xfade 48s 24s infinite; | |
| animation: xfade 48s 24s infinite; | |
| } | |
| .css-slideshow figure:nth-child(5) { | |
| -webkit-animation: xfade 48s 18s infinite; | |
| -moz-animation: xfade 48s 18s infinite; | |
| -ms-animation: xfade 48s 18s infinite; | |
| -o-animation: xfade 48s 18s infinite; | |
| animation: xfade 48s 18s infinite; | |
| } | |
| .css-slideshow figure:nth-child(6) { | |
| -webkit-animation: xfade 48s 12s infinite; | |
| -moz-animation: xfade 48s 12s infinite; | |
| -ms-animation: xfade 48s 12s infinite; | |
| -o-animation: xfade 48s 12s infinite; | |
| animation: xfade 48s 12s infinite; | |
| } | |
| .css-slideshow figure:nth-child(7) { | |
| -webkit-animation: xfade 48s 6s infinite; | |
| -moz-animation: xfade 48s 6s infinite; | |
| -ms-animation: xfade 48s 6s infinite; | |
| -o-animation: xfade 48s 6s infinite; | |
| animation: xfade 48s 6s infinite; | |
| } | |
| .css-slideshow figure:nth-child(8) { | |
| -webkit-animation: xfade 48s 0s infinite; | |
| -moz-animation: xfade 48s 0s infinite; | |
| -ms-animation: xfade 48s 0s infinite; | |
| -o-animation: xfade 48s 0s infinite; | |
| animation: xfade 48s 0s infinite; | |
| } | |
| @keyframes "xfade" { | |
| 0% { | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| 14.67% { | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| 16.67% { | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| } | |
| 98% { | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| } | |
| 100% { | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| } | |
| @-moz-keyframes xfade { | |
| 0% { | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| 14.67% { | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| 16.67% { | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| } | |
| 98% { | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| } | |
| 100% { | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| } | |
| @-webkit-keyframes "xfade" { | |
| 0% { | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| 14.67% { | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| 16.67% { | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| } | |
| 98% { | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| } | |
| 100% { | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| } | |
| @-ms-keyframes "xfade" { | |
| 0% { | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| 14.67% { | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| 16.67% { | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| } | |
| 98% { | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| } | |
| 100% { | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| } | |
| @-o-keyframes "xfade" { | |
| 0% { | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| 14.67% { | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| 16.67% { | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| } | |
| 98% { | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| } | |
| 100% { | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi, thanks for this nice slideshow version. Unfortunately, I am trying to make it responsive, and not succeeding. I have set max-width: 500px; and max-height: 450px; for the slideshow, and set the slideshow figure to max-width:100%; but they do not resize in smaller windows. Can you please help me figure out what I am missing? Many thanks!