Difference between revisions of "Team:SVCE Chennai/Gallery"

Line 170: Line 170:
 
 
 
</script>
 
</script>
 +
    <style>
 +
       
 +
.photostack {
 +
background: #ddd;
 +
position: relative;
 +
text-align: center;
 +
overflow: hidden;
 +
}
 +
 +
.js .photostack {
 +
height: 580px;
 +
}
 +
 +
.photostack-start {
 +
cursor: pointer;
 +
}
 +
 +
/* Wrapper and figures */
 +
 +
/* The size of this wrapper can be smaller if the items should not be scattered across the whole container */
 +
.photostack > div {
 +
width: 100%;
 +
height: 100%;
 +
margin: 0 auto;
 +
}
 +
 +
.photostack figure {
 +
width: 320px;
 +
height: 360px;
 +
position: relative;
 +
display: inline-block;
 +
background: #fff;
 +
padding: 40px;
 +
text-align: center;
 +
margin: 5px;
 +
}
 +
 +
.js .photostack figure {
 +
position: absolute;
 +
display: block;
 +
margin: 0;
 +
}
 +
 +
.photostack figcaption h2 {
 +
margin: 20px 0 0 0;
 +
color: #a7a0a2;
 +
font-size: 16px;
 +
}
 +
 +
.photostack-img {
 +
outline: none;
 +
display: block;
 +
width: 240px;
 +
height: 240px;
 +
background: #f9f9f9;
 +
}
 +
 +
.photostack-back {
 +
display: none;
 +
position: absolute;
 +
width: 100%;
 +
height: 100%;
 +
top: 0;
 +
left: 0;
 +
background: #fff;
 +
font-family: "Give You Glory", cursive;
 +
color: #a7a0a2;
 +
padding: 50px 40px;
 +
text-align: left;
 +
font-size: 22px;
 +
line-height: 1.25;
 +
z-index: 1;
 +
}
 +
 +
.photostack-back p {
 +
margin: 0;
 +
}
 +
 +
.photostack-back p span {
 +
text-decoration: line-through;
 +
}
 +
 +
/* Navigation dots */
 +
.photostack nav {
 +
position: absolute;
 +
width: 100%;
 +
bottom: 30px;
 +
z-index: 90;
 +
text-align: center;
 +
left: 0;
 +
-webkit-transition: opacity 0.3s;
 +
transition: opacity 0.3s;
 +
}
 +
 +
.photostack-start nav {
 +
opacity: 0;
 +
}
 +
 +
.photostack nav span {
 +
position: relative;
 +
display: inline-block;
 +
margin: 0 5px;
 +
width: 30px;
 +
height: 30px;
 +
cursor: pointer;
 +
background: #aaa;
 +
border-radius: 50%;
 +
text-align: center;
 +
-webkit-transition: -webkit-transform 0.6s ease-in-out, background 0.3s;
 +
transition: transform 0.6s ease-in-out, background 0.3s;
 +
-webkit-transform: scale(0.48);
 +
transform: scale(0.48);
 +
}
 +
 +
.photostack nav span:last-child {
 +
margin-right: 0;
 +
}
 +
 +
.photostack nav span::after {
 +
content: "\e600";
 +
font-family: 'icons';
 +
font-size: 80%;
 +
speak: none;
 +
display: inline-block;
 +
vertical-align: top;
 +
font-style: normal;
 +
font-weight: normal;
 +
font-variant: normal;
 +
text-transform: none;
 +
line-height: 30px;
 +
color: #fff;
 +
opacity: 0;
 +
-webkit-font-smoothing: antialiased;
 +
-moz-osx-font-smoothing: grayscale;
 +
-webkit-transition: opacity 0.3s;
 +
transition: opacity 0.3s;
 +
-webkit-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
}
 +
 +
.photostack nav span.current {
 +
background: #888;
 +
-webkit-transform: scale(1);
 +
transform: scale(1);
 +
}
 +
 +
.photostack nav span.current.flip {
 +
-webkit-transform: scale(1) rotateY(-180deg) translateZ(-1px);
 +
transform: scale(1) rotateY(-180deg) translateZ(-1px);
 +
background: #555;
 +
}
 +
 +
.photostack nav span.flippable::after {
 +
opacity: 1;
 +
-webkit-transition-delay: 0.4s;
 +
transition-delay: 0.4s;
 +
}
 +
 +
/* Overlays */
 +
 +
/* Initial overlay on photostack container */
 +
.js .photostack::before {
 +
content: '';
 +
position: absolute;
 +
width: 100%;
 +
height: 100%;
 +
background: rgba(0,0,0,0.5);
 +
top: 0;
 +
left: 0;
 +
z-index: 100;
 +
-webkit-transition: opacity 0.3s, visibility 0s 0.3s;
 +
transition: opacity 0.3s, visibility 0s 0.3s;
 +
}
 +
 +
.js .photostack-start::before {
 +
-webkit-transition: opacity 0.3s;
 +
transition: opacity 0.3s;
 +
}
 +
 +
/* Button on photostack container */
 +
.js .photostack::after {
 +
content: 'View Gallery';
 +
font-weight: 400;
 +
position: absolute;
 +
border: 3px solid #fff;
 +
text-align: center;
 +
white-space: nowrap;
 +
left: 50%;
 +
top: 50%;
 +
-webkit-transform: translateY(-50%) translateX(-50%);
 +
transform: translateY(-50%) translateX(-50%);
 +
padding: 10px 20px;
 +
color: #fff;
 +
text-transform: uppercase;
 +
letter-spacing: 1px;
 +
cursor: pointer;
 +
z-index: 101;
 +
}
 +
 +
.js .photostack::before,
 +
.js .photostack::after {
 +
opacity: 0;
 +
visibility: hidden;
 +
}
 +
 +
.js .photostack-start::before,
 +
.js .photostack-start:hover::after,
 +
.touch .photostack-start::after  {
 +
opacity: 1;
 +
visibility: visible;
 +
}
 +
 +
/* Overlay on figure */
 +
.photostack figure::after {
 +
content: '';
 +
position: absolute;
 +
width: 100%;
 +
height: 100%;
 +
top: 0;
 +
left: 0;
 +
visibility: visible;
 +
opacity: 1;
 +
background: rgba(0,0,0,0.05);
 +
-webkit-transition: opacity 0.6s;
 +
transition: opacity 0.6s;
 +
}
 +
 +
/* Hide figure overlay when it becomes current */
 +
figure.photostack-current::after {
 +
-webkit-transition: opacity 0.6s, visibility 0s 0.6s;
 +
transition: opacity 0.6s, visibility 0s 0.6s;
 +
opacity: 0;
 +
visibility: hidden;
 +
}
 +
 +
/* Special classes for transitions and perspective */
 +
.photostack-transition figure {
 +
-webkit-transition: -webkit-transform 0.6s ease-in-out;
 +
transition: transform 0.6s ease-in-out;
 +
}
 +
 +
.photostack-perspective {
 +
-webkit-perspective: 1800px;
 +
perspective: 1800px;
 +
}
 +
 +
.photostack-perspective > div,
 +
.photostack-perspective figure {
 +
-webkit-transform-style: preserve-3d;
 +
transform-style: preserve-3d;
 +
}
 +
 +
.photostack-perspective figure,
 +
.photostack-perspective figure div {
 +
-webkit-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
}
 +
 +
.photostack-perspective figure.photostack-flip {
 +
-webkit-transform-origin: 0% 50%;
 +
transform-origin: 0% 50%;
 +
}
 +
 +
.csstransformspreserve3d figure.photostack-flip .photostack-back {
 +
-webkit-transform: rotateY(180deg);
 +
transform: rotateY(180deg);
 +
display: block;
 +
}
 +
 +
.no-csstransformspreserve3d figure.photostack-showback .photostack-back {
 +
display: block;
 +
}
 +
 +
/* The no-JS fallback look does not need to be boring ;) */
 +
.no-js .photostack figure {
 +
box-shadow: -2px 2px 0 rgba(0,0,0,0.05);
 +
}
 +
 +
.no-js .photostack figure::after {
 +
display: none;
 +
}
 +
 +
.no-js .photostack figure:nth-child(3n) {
 +
-webkit-transform: translateX(-10%) rotate(5deg);
 +
transform: translateX(-10%) rotate(5deg);
 +
}
 +
 +
.no-js .photostack figure:nth-child(3n-2) {
 +
-webkit-transform: translateY(10%) rotate(-3deg);
 +
transform: translateY(10%) rotate(-3deg);
 +
}
 +
 +
/* Some custom styles for the demo */
 +
 +
/* Since we don't have back sides for the first photo stack, we don't want the current dot to become too big */
 +
#photostack-1 nav span.current {
 +
background: #888;
 +
-webkit-transform: scale(0.61);
 +
transform: scale(0.61);
 +
            }</style>
 
</html>
 
</html>

Revision as of 20:38, 18 September 2015

Gallery

img16

Lightness

Lets talk!

Sri Venkateswara College of Engineering, Chennai