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.

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.

smaddock commented 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.

@smaddock

This comment has been minimized.

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.

anyusernameleft commented 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.

@Ronald11103

This comment has been minimized.

Ronald11103 commented 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?

@ShanzaAbbas

This comment has been minimized.

ShanzaAbbas commented Aug 28, 2015

ok it worked.. thnx

@saikrishnagaddipati

This comment has been minimized.

saikrishnagaddipati commented Apr 27, 2016

Thank you it was helpful.

@SJSadmin

This comment has been minimized.

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