Team Page under construction (#27)

Author: xeon-zolt

pages/team/Photos/chetan.jpg

@@ -0,0 +1,12 @@
+Suppose two planes are hidden and are going to be shown 1 by 1 on hover container. E.g.On hover container, flips plane A (0.7s motion) after that flips plane B(0.3s motion), on mouse out container, transit reversely, i.e. flips plane B(0.3s motion) after that flips plan A(0.7s motion). 
+
+We can do that by specifying `transition-delay` on `:hover` state. Yes.
+E.g.  
+
+    A:hover { transition-delay:0 }  /* A first */
+    B:hover { transition-delay:0.7s }  /* 0.7s for A motion duration */
+
+Then, on normal state (see it as mouse out state)
+
+    A { transition-delay:0.3s }  /* 0.3s for B motion duration */
+    B { transition-delay:0s }  /* B first */

pages/team/Photos/dilpreet.jpg

@@ -0,0 +1,116 @@
+html, body {
+  min-height:100vh;
+}
+
+body {
+  display:flex; 
+  align-items:center; 
+  flex-flow:column nowrap;
+  overflow-x:hidden;
+}
+
+.title {
+  font:1.3em/1 monospace;
+  font-variant:small-caps;
+  letter-spacing:0.5em;
+  margin:4em;
+}
+
+.gallery {
+  -webkit-perspective:700px;
+          perspective:700px;
+  width:50vw;
+  display:flex; justify-content:center; align-items:center; flex-flow:row wrap;
+}
+
+ul {
+  position:relative;
+  width:100px; height:100px;
+  margin:0.1em;
+  -webkit-perspective-origin:center center;
+          perspective-origin:center center;
+  -webkit-transform-style:preserve-3d;
+          transform-style:preserve-3d;
+  -webkit-transform:rotateX(40deg);
+          transform:rotateX(40deg);
+  transition:all 0.4s;
+}
+
+ul:hover {
+  -webkit-transform:translateZ(100px) rotateX(20deg);
+          transform:translateZ(100px) rotateX(20deg); z-index:999;
+}
+
+ul:hover li {
+  -webkit-filter:grayscale(0);
+          filter:grayscale(0);
+}
+
+li {
+  position:absolute; left:0; top:0;
+  -webkit-backface-visibility:hidden;
+          backface-visibility:hidden;
+  width:100%; height:100%;
+  transition:-webkit-transform 0.3s, -webkit-filter 1s;
+  transition:transform 0.3s, filter 1s;
+  transition:transform 0.3s, filter 1s, -webkit-transform 0.3s, -webkit-filter 1s;
+  background:coral;
+  -webkit-filter:grayscale(0.9);
+          filter:grayscale(0.9);
+}
+/*
+Setup individual planes final poistion(by left top) and initial position(by transform)
+*/
+li:first-of-type {-webkit-transform:none;transform:none;}
+li:nth-of-type(2) {left:100%; -webkit-transform-origin:left center; transform-origin:left center; -webkit-transform:rotateY(180deg); transform:rotateY(180deg);}
+li:nth-of-type(3) {top:100%; -webkit-transform-origin:center top; transform-origin:center top; -webkit-transform:rotateX(-180deg); transform:rotateX(-180deg);}
+li:nth-of-type(4) {left:-100%; -webkit-transform-origin:right center; transform-origin:right center; -webkit-transform:rotateY(-180deg); transform:rotateY(-180deg);}
+li:nth-of-type(5) {top:-100%; -webkit-transform-origin:center bottom; transform-origin:center bottom; -webkit-transform:rotateX(180deg); transform:rotateX(180deg);}
+li:nth-of-type(6) {top:100%; left:100%; -webkit-transform-origin:center top; transform-origin:center top; -webkit-transform:rotateX(-180deg); transform:rotateX(-180deg);}
+li:nth-of-type(7) {top:100%; left:-100%; -webkit-transform-origin:right center; transform-origin:right center; -webkit-transform:rotateY(-180deg); transform:rotateY(-180deg);}
+li:nth-of-type(8) {top:-100%; left:-100%; -webkit-transform-origin:center bottom; transform-origin:center bottom; -webkit-transform:rotateX(180deg); transform:rotateX(180deg);}
+li:nth-of-type(9) {top:-100%; left:100%; -webkit-transform-origin:left center; transform-origin:left center; -webkit-transform:rotateY(180deg); transform:rotateY(180deg);}
+/*
+Setup transition-delay, for mouseout state 
+*/
+li:nth-of-type(2),li:nth-of-type(3),li:nth-of-type(4),li:nth-of-type(5) {transition-delay:0.03s;}
+li:nth-of-type(6),li:nth-of-type(7),li:nth-of-type(8),li:nth-of-type(9) {transition-delay:0s;}
+ul:hover :nth-of-type(2),ul:hover :nth-of-type(3),ul:hover :nth-of-type(4),ul:hover :nth-of-type(5) {transition-delay:0s}
+ul:hover :nth-of-type(6),ul:hover :nth-of-type(7),ul:hover :nth-of-type(8),ul:hover :nth-of-type(9) {transition-delay:0.2s}
+/*
+Setup planes final state
+*/
+ul:hover :nth-of-type(2),ul:hover :nth-of-type(4),ul:hover :nth-of-type(7),ul:hover :nth-of-type(9) {-webkit-transform:rotateY(0);transform:rotateY(0);}
+ul:hover :nth-of-type(3), ul:hover :nth-of-type(5),ul:hover :nth-of-type(6), ul:hover :nth-of-type(8) {-webkit-transform:rotateX(0);transform:rotateX(0);}
+/* 
+Set background position
+*/
+ul li {background-size:300% 300%;}
+li:nth-of-type(1) {background-position:center center;}
+li:nth-of-type(2) {background-position:right center;}
+li:nth-of-type(3) {background-position:center bottom;}
+li:nth-of-type(4) {background-position:left center;}
+li:nth-of-type(5) {background-position:center top;}
+li:nth-of-type(6) {background-position:right bottom;}
+li:nth-of-type(7) {background-position:left bottom;}
+li:nth-of-type(8) {background-position:left top;}
+li:nth-of-type(9) {background-position:right top;}
+/*
+Set background image source
+*/
+ul:nth-of-type(1) li { background-image:url(../Photos/chetan.jpg);}
+ul:nth-of-type(1) { width:90px; height:90px; }
+ul:nth-of-type(2) li { background-image:url(../Photos/harsh_lathwal.jpeg);}
+ul:nth-of-type(2) { width:66px; height:66px; }
+ul:nth-of-type(3) li { background-image:url(../Photos/dilpreet.jpg);}
+ul:nth-of-type(3) { width:130px; height:90px; }
+ul:nth-of-type(4) li { background-image:url(../Photos/#.jpg);}
+ul:nth-of-type(4) { width:120px; height:80px; }
+ul:nth-of-type(5) li { background-image:url(../Photos/#.jpg);}
+ul:nth-of-type(5) { width:64px; height:84px; }
+ul:nth-of-type(6) li { background-image:url(../Photos/#.jpg);}
+ul:nth-of-type(6) { width:100px; height:66px; }
+/* 
+Hide debug label 
+*/
+li { text-indent:999px; overflow:hidden; }