Team:Manchester/css/team-overlay.css

From 2014.igem.org

(Difference between revisions)
Line 82: Line 82:
}
}
-
/*----------------------*/
+
/*---------------*/
-
/***** Ruby Effects *****/
+
/***** Marley *****/
-
/*----------------------*/
+
/*---------------*/
-
figure.effect-ruby {
+
figure.effect-marley figcaption {
-
background-color: #6600CC;
+
text-align: right;
}
}
-
figure.effect-ruby img {
+
figure.effect-marley h2,
-
opacity: 1;
+
figure.effect-marley p {
-
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+
position: absolute;
-
transition: opacity 0.35s, transform 0.35s;
+
right: 30px;
-
-webkit-transform: scale(1.15);
+
left: 30px;
-
transform: scale(1.15);
+
padding: 10px 0;
}
}
-
figure.effect-ruby:hover img {
+
 
-
opacity: 0.7;
+
figure.effect-marley p {
-
-webkit-transform: scale(1);
+
bottom: 30px;
-
transform: scale(1);
+
line-height: 1.5;
 +
-webkit-transform: translate3d(0,100%,0);
 +
transform: translate3d(0,100%,0);
}
}
-
figure.effect-ruby h2 {
+
figure.effect-marley h2 {
-
margin-top: 5%;
+
top: 30px;
-webkit-transition: -webkit-transform 0.35s;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
transition: transform 0.35s;
Line 112: Line 114:
}
}
-
figure.effect-ruby p {
+
figure.effect-marley:hover h2 {
-
margin: 1em 0 0;
+
-webkit-transform: translate3d(0,0,0);
-
padding: 5em;
+
transform: translate3d(0,0,0);
-
font-weight: bold;
+
}
-
border: 2px solid #fff;
+
 
 +
figure.effect-marley h2::after {
 +
position: absolute;
 +
top: 100%;
 +
left: 0;
 +
width: 100%;
 +
height: 4px;
 +
background: #fff;
 +
content: '';
 +
-webkit-transform: translate3d(0,40px,0);
 +
transform: translate3d(0,40px,0);
 +
}
 +
 
 +
figure.effect-marley h2::after,
 +
figure.effect-marley p {
opacity: 0;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-
-webkit-transform: translate3d(0,20px,0) scale(1.1);
+
}
-
transform: translate3d(0,20px,0) scale(1.1);
+
-
}  
+
-
figure.effect-ruby:hover h2 {
+
figure.effect-marley:hover h2::after,
 +
figure.effect-marley:hover p {
 +
opacity: 1;
-webkit-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
}
-
 
-
figure.effect-ruby:hover p {
 
-
opacity: 1;
 
-
-webkit-transform: translate3d(0,0,0) scale(1);
 
-
transform: translate3d(0,0,0) scale(1);
 
-
}
 
-
 
@media screen and (max-width: 69.5em) {
@media screen and (max-width: 69.5em) {

Revision as of 19:38, 15 August 2014

.grid { overflow: hidden; margin: 0; padding: 3em 0 0 0; width: 100%; list-style: none; text-align: center; }

/* Common style */ .grid figure { position: relative; z-index: 10; display: inline-block; overflow: hidden; margin: 10px; width: 30%; height: 400px; /*padding: px;*/ background: #3085a3; text-align: center; cursor: pointer; }

.grid figure img { position: relative; display: block; min-height: 100%; opacity: 0.8; }

.grid figure figcaption { padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

.grid figure figcaption::before, .grid figure figcaption::after { pointer-events: none; }

.grid figure figcaption, .grid figure a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Anchor will cover the whole item by default */ /* For some effects it will show as a button */ .grid figure a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; }

.grid figure h2 { word-spacing: -0.15em; font-weight: 300; }

.grid figure h2 span { font-weight: 800; }

.grid figure h2, .grid figure p { margin: 0; }

.grid figure p { letter-spacing: 1px; font-size: 80.5%; }

/*---------------*/ /***** Marley *****/ /*---------------*/

figure.effect-marley figcaption { text-align: right; }

figure.effect-marley h2, figure.effect-marley p { position: absolute; right: 30px; left: 30px; padding: 10px 0; }


figure.effect-marley p { bottom: 30px; line-height: 1.5; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); }

figure.effect-marley h2 { top: 30px; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0,20px,0); transform: translate3d(0,20px,0); }

figure.effect-marley:hover h2 { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }

figure.effect-marley h2::after { position: absolute; top: 100%; left: 0; width: 100%; height: 4px; background: #fff; content: ; -webkit-transform: translate3d(0,40px,0); transform: translate3d(0,40px,0); }

figure.effect-marley h2::after, figure.effect-marley p { opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; }

figure.effect-marley:hover h2::after, figure.effect-marley:hover p { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }

@media screen and (max-width: 69.5em) { .grid figure { width: 50%; }

.grid figure figcaption { font-size: 90%; } }


@media screen and (max-width: 41.5em) {

.grid figure { width: 100%; } }

Retrieved from "http://2014.igem.org/Team:Manchester/css/team-overlay.css"