Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
prefixed CSS for slideshow example
/* 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;
}
}
@DvDj

This comment has been minimized.

Show comment
Hide comment
@DvDj

DvDj Oct 23, 2014

Hi Mark,
Your CSS code above for the slideshow perfectly resolved an issue i was having so thank you very much for that.
I wondered if anyone else was having problems with getting this code to work in Internet Explorer 11?
My knowledge of CSS isn't too bad but i have little to no understanding on browser specific prefixes. I have checked, double checked and triple checked my code and cannot see any errors.
The slideshow runs beautifully in Chrome but doesn't even show in Internet Explorer.
Your thoughts would be very much appreciated.

DvDj commented Oct 23, 2014

Hi Mark,
Your CSS code above for the slideshow perfectly resolved an issue i was having so thank you very much for that.
I wondered if anyone else was having problems with getting this code to work in Internet Explorer 11?
My knowledge of CSS isn't too bad but i have little to no understanding on browser specific prefixes. I have checked, double checked and triple checked my code and cannot see any errors.
The slideshow runs beautifully in Chrome but doesn't even show in Internet Explorer.
Your thoughts would be very much appreciated.

@smaddock

This comment has been minimized.

Show comment
Hide comment
@smaddock

smaddock Nov 25, 2014

@DvDj I had the same problem; remove the quotes from line 117 and it works.

Also changed line 57-59 to be 100/100/1 instead of 0s so it didn't fade through white the first time through the slides.

@DvDj I had the same problem; remove the quotes from line 117 and it works.

Also changed line 57-59 to be 100/100/1 instead of 0s so it didn't fade through white the first time through the slides.

@smaddock

This comment has been minimized.

Show comment
Hide comment
@smaddock

smaddock Dec 1, 2014

Actually, since IE has only ever supported the unprefixed CSS animations, this can be simplified quite a bit. Suspect the same is true with killing the -moz and -o prefixes as well.

smaddock commented Dec 1, 2014

Actually, since IE has only ever supported the unprefixed CSS animations, this can be simplified quite a bit. Suspect the same is true with killing the -moz and -o prefixes as well.

@anyusernameleft

This comment has been minimized.

Show comment
Hide comment
@anyusernameleft

anyusernameleft Jan 2, 2015

Hi,
Thank you so much for the demo! This is excellent!
The only problem I am having is that although I have got the slideshows working perfectly now on the web and on iPads and iPhones running IOS 7, it does not work in IOS 8. Does anyone have any ideas?
Thank you.

Hi,
Thank you so much for the demo! This is excellent!
The only problem I am having is that although I have got the slideshows working perfectly now on the web and on iPads and iPhones running IOS 7, it does not work in IOS 8. Does anyone have any ideas?
Thank you.

@Ronald11103

This comment has been minimized.

Show comment
Hide comment
@Ronald11103

Ronald11103 Mar 25, 2015

Before adding the prefix code above, it worked fine in Firefox 36 and IE 11, but not in Chrome, Android tablet/phone, or iPad (don't know the IOS version of the iPad.) After adding the prefix code above get exact same results. Works fine in Firefox 36 and IE 11, but not in Chrome, Android tablet/phone, nor iPad. Any ideas?

Before adding the prefix code above, it worked fine in Firefox 36 and IE 11, but not in Chrome, Android tablet/phone, or iPad (don't know the IOS version of the iPad.) After adding the prefix code above get exact same results. Works fine in Firefox 36 and IE 11, but not in Chrome, Android tablet/phone, nor iPad. Any ideas?

@ShanzaAbbas

This comment has been minimized.

Show comment
Hide comment
@ShanzaAbbas

ShanzaAbbas Aug 28, 2015

ok it worked.. thnx

ok it worked.. thnx

@saikrishnagaddipati

This comment has been minimized.

Show comment
Hide comment
@saikrishnagaddipati

saikrishnagaddipati Apr 27, 2016

Thank you it was helpful.

Thank you it was helpful.

@SJSadmin

This comment has been minimized.

Show comment
Hide comment
@SJSadmin

SJSadmin Jun 3, 2016

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!

SJSadmin commented Jun 3, 2016

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment