Difference between revisions of "Template:Template Wellesley TheTech"

Line 3: Line 3:
 
<style type="text/css">
 
<style type="text/css">
 
   
 
   
−
.css-slideshow{
+
.css-slideshow {
−
  position: relative;
+
position: relative;
−
  max-width: 495px;
+
max-width: 495px;
−
  height: 370px;
+
height: 370px;
−
  margin: 5em auto .5em auto;
+
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{
+
.css-slideshow figure {
−
  margin: 0;
+
margin: 0;
−
  position: absolute;
+
max-width: 495px;
 +
height: 370px;
 +
background: #fff;
 +
position: absolute;
 
}
 
}
−
.css-slideshow figcaption{
+
.css-slideshow img {
−
  position: absolute;
+
-webkit-box-shadow: 0 0 2px #666;
−
  top: 0;
+
box-shadow: 0 0 2px #666;
−
  color: #fff;
+
−
  background: rgba(0,0,0, .3);
+
−
  font-size: .8em;
+
−
  padding: 8px 12px;
+
−
  opacity: 0;
+
−
  transition: opacity .5s;
+
 
}
 
}
−
.css-slideshow:hover figure figcaption{
+
.css-slideshow figcaption {
−
  transition: opacity .5s;
+
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;
 
   opacity: 1;
 +
}
 +
14.67% {
 +
filter: alpha(opacity=100);
 +
opacity: 1;
 
}
 
}
−
.css-slideshow figure{
+
16.67% {
−
  opacity:0;
+
filter: alpha(opacity=0);
 +
opacity: 0;
 
}
 
}
−
 
+
98% {
−
figure:nth-child(1) {
+
  filter: alpha(opacity=0);
−
  animation: xfade 48s 42s infinite;
+
  opacity: 0;
 +
}
 +
100% {
 +
  filter: alpha(opacity=100);
 +
  opacity: 1;
 +
}
 
}
 
}
−
figure:nth-child(2) {
+
@-webkit-keyframes "xfade" {
−
  animation: xfade 48s 36s infinite;
+
0% {
 +
  filter: alpha(opacity=100);
 +
  opacity: 1;
 +
}
 +
14.67% {
 +
filter: alpha(opacity=100);
 +
opacity: 1;
 
}
 
}
−
figure:nth-child(3) {
+
16.67% {
−
  animation: xfade 48s 30s infinite;
+
filter: alpha(opacity=0);
 +
opacity: 0;
 
}
 
}
−
figure:nth-child(4) {
+
98% {
−
  animation: xfade 48s 24s infinite;
+
  filter: alpha(opacity=0);
 +
  opacity: 0;
 +
}
 +
100% {
 +
  filter: alpha(opacity=100);
 +
  opacity: 1;
 +
}
 
}
 
}
−
figure:nth-child(5) {
+
@-ms-keyframes "xfade" {
−
  animation: xfade 48s 18s infinite;
+
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;
 
}
 
}
−
figure:nth-child(6) {
+
16.67% {
−
  animation: xfade 48s 12s infinite;
+
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 +
filter: alpha(opacity=0);
 +
opacity: 0;
 
}
 
}
−
figure:nth-child(7) {
+
98% {
−
  animation: xfade 48s 6s infinite;
+
  -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;
 +
}
 
}
 
}
−
figure:nth-child(8) {
+
@-o-keyframes "xfade" {
−
  animation: xfade 48s 0s infinite;
+
0% {
 +
  filter: alpha(opacity=100);
 +
  opacity: 1;
 +
}
 +
14.67% {
 +
filter: alpha(opacity=100);
 +
opacity: 1;
 
}
 
}
−
 
+
16.67% {
−
@keyframes xfade{
+
filter: alpha(opacity=0);
−
  0%{
+
opacity: 0;
−
    opacity: 1;
+
}
−
  }
+
98% {
−
  10.5% {
+
  filter: alpha(opacity=0);
−
    opacity: 1;
+
  opacity: 0;
−
  }
+
}
−
  12.5%{
+
100% {
−
    opacity: 0;
+
  filter: alpha(opacity=100);
−
  }
+
  opacity: 1;
−
  98% {
+
}
−
    opacity: 0;
+
−
  }
+
−
  100% {
+
−
    opacity: 1;
+
−
  }
+
 
}
 
}
 
 

Revision as of 02:44, 19 September 2015