Team:York/ImageGallery.css

From 2014.igem.org

(Difference between revisions)
(Created page with " /* http://www.menucool.com */ #sliderFrame { position:relative; width:700px; margin:0 auto; - →center-aligned: } #slider, #slider div.sliderInner { width:700p...")
 
Line 1: Line 1:
-
/* http://www.menucool.com */
+
.css-slideshow {
-
 
+
position: relative;
-
#sliderFrame
+
max-width: 495px;
-
{
+
height: 370px;
-
    position:relative;
+
margin-left: 100px;
-
    width:700px;
+
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-
    margin:0 auto; /*center-aligned*/
+
font-weight: 300;
}
}
-
 
+
.css-slideshow figure {
-
#slider, #slider div.sliderInner {
+
margin: 0;
-
    width:700px;height:306px;/* Must be the same size as the slider images */
+
max-width: 495px;
 +
background: #fff;
 +
position: absolute;
}
}
-
 
+
.css-slideshow img {
-
#slider {
+
-webkit-box-shadow: 0 0 2px #666;
-
background:#fff url(loading.gif) no-repeat 50% 50%;
+
box-shadow: 0 0 2px #666;
-
position:relative;
+
-
margin:0 auto; /*center-aligned*/
+
-
    transform: translate3d(0,0,0);
+
-
    box-shadow: 0px 1px 5px #999999;
+
}
}
-
 
+
.css-slideshow figcaption {
-
/* image wrapper */
+
position: absolute;
-
#slider a.imgLink, #slider div.video {
+
top: 5px;
-
z-index:2;
+
color: #fff;
-
position:absolute;
+
background: rgba(0,0,0, .3);
-
top:0px;left:0px;border:0;padding:0;margin:0;
+
font-size: .8em;
-
width:100%;height:100%;
+
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;
}
}
-
#slider .video {
+
.css-slideshow:hover figure figcaption {
-
background:transparent url(video.png) no-repeat 50% 50%;
+
-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 {
-
/* Caption styles */
+
max-width: 530px;
-
#slider div.mc-caption-bg, #slider div.mc-caption-bg2 {
+
text-align: right;
-
position:absolute;
+
font-size: .7em;
-
width:100%;
+
font-style: italic;
-
height:auto;
+
-
padding:10px 0;/* 10px will increase the height.*/
+
-
left:0px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/
+
-
bottom:0px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/
+
-
z-index:3;
+
-
overflow:hidden;
+
-
font-size: 0;
+
}
}
-
#slider div.mc-caption-bg
+
.css-slideshow-attr a {
-
{
+
color: #666;
-
    /* NOTE: Its opacity is to be set through the sliderOptions.captionOpacity setting in the js-image-slider.js file.*/
+
-
background:Black;/* or any other colors such as White, or: background:none; */
+
}
}
-
#slider div.mc-caption-bg2 {
+
.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) {
-
    background:none;
+
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 +
filter: alpha(opacity=0);
 +
opacity: 0;
}
}
-
#slider div.mc-caption {
+
.css-slideshow figure:nth-child(1) {
-
font: bold 14px/20px Arial;
+
-webkit-animation: xfade 48s 42s 5;
-
color:#EEE;
+
-moz-animation: xfade 48s 42s 5;
-
z-index:4;
+
-ms-animation: xfade 48s 42s infinite;
-
text-align:center;
+
-o-animation: xfade 48s 42s infinite;
-
    background:none;
+
animation: xfade 48s 42s infinite;
}
}
-
#slider div.mc-caption a {
+
.css-slideshow figure:nth-child(2) {
-
color:#FB0;
+
-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;
}
}
-
#slider div.mc-caption a:hover {
+
.css-slideshow figure:nth-child(3) {
-
color:#DA0;
+
-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;
-
/* ------ built-in navigation bullets wrapper ------*/
+
-moz-animation: xfade 48s 24s infinite;
-
/* Note: check themes\2\js-image-slider.css to see how to hide nav bullets */
+
-ms-animation: xfade 48s 24s infinite;
-
#slider div.navBulletsWrapper  {
+
-o-animation: xfade 48s 24s infinite;
-
    top:320px;/* Its position is relative to the #slider */
+
animation: xfade 48s 24s infinite;
-
text-align:center;
+
-
background:none;
+
-
position:relative;
+
-
z-index:5;
+
}
}
-
 
+
.css-slideshow figure:nth-child(5) {
-
/* each bullet */
+
-webkit-animation: xfade 48s 18s infinite;
-
#slider div.navBulletsWrapper div
+
-moz-animation: xfade 48s 18s infinite;
-
{
+
-ms-animation: xfade 48s 18s infinite;
-
    width:11px; height:11px;
+
-o-animation: xfade 48s 18s infinite;
-
    font-size:0;color:White;/*hide the index number in the bullet element*/
+
animation: xfade 48s 18s infinite;
-
    background:transparent url(bullet.png) no-repeat 0 0;
+
-
    display:inline-block; *display:inline; zoom:1;
+
-
    overflow:hidden;cursor:pointer;
+
-
    margin:0 6px;/* set distance between each bullet*/
+
}
}
-
 
+
.css-slideshow figure:nth-child(6) {
-
#slider div.navBulletsWrapper div.active {background-position:0 -11px;}
+
-webkit-animation: xfade 48s 12s infinite;
-
 
+
-moz-animation: xfade 48s 12s infinite;
-
 
+
-ms-animation: xfade 48s 12s infinite;
-
/* --------- Others ------- */
+
-o-animation: xfade 48s 12s infinite;
-
 
+
animation: xfade 48s 12s infinite;
-
#slider div.loading
+
-
{
+
-
    width:100%; height:100%;
+
-
    background:transparent url(loading.gif) no-repeat 50% 50%;
+
-
    filter: alpha(opacity=60);
+
-
    opacity:0.6;
+
-
    position:absolute;
+
-
    left:0;
+
-
    top:0;
+
-
    z-index:9;
+
}
}
-
 
+
.css-slideshow figure:nth-child(7) {
-
#slider img, #slider>b, #slider a>b {
+
-webkit-animation: xfade 48s 6s infinite;
-
position:absolute; border:none; display:none;
+
-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) {
-
#slider div.sliderInner {
+
-webkit-animation: xfade 48s 0s infinite;
-
overflow:hidden;  
+
-moz-animation: xfade 48s 0s infinite;
-
-webkit-transform: rotate(0.000001deg);/* fixed the Chrome not crop border-radius bug*/
+
-ms-animation: xfade 48s 0s infinite;
-
position:absolute; top:0; left:0;
+
-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;
 +
}
}
}
-
 
-
#slider>a, #slider video, #slider audio {display:none;}
 

Latest revision as of 09:35, 28 August 2014

.css-slideshow { position: relative; max-width: 495px; height: 370px; margin-left: 100px; 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; 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 5; -moz-animation: xfade 48s 42s 5; -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;
}

}

Retrieved from "http://2014.igem.org/Team:York/ImageGallery.css"