Difference between revisions of "Template:Rotterdam HR/css/team"

Latest revision as of 19:45, 7 December 2018

/* ------ TEAMLEDEN CSS ------ */ h1 { background: var(--color-primary); color: white; text-align: center; padding: 20px 0; margin: 20px 0; }

.item p { margin: 0; padding: 10px; } .item h3 { margin: 0; } .item ul { margin: 0; padding: 3px 0 3px 10px; list-style-type: none; border-left: black solid 2px; } .team-banner { margin: 20px; } .multiple-items { display: flex; flex-wrap: wrap; width: 90%; justify-content: space-evenly; margin: 0 auto; } .item { transition: 200ms; margin: 10px; padding: 10px; } .item .summary { background: rgba(255, 255, 255, 0.8); display: none; width: 100%; height: 100%; overflow: hidden; } .item .profile-picture { width: 320px; height: 320px; border-radius: 50%; transition: all 200ms, background-image 200ms 500ms; } .item .title { margin: 10px 0; padding: 5px 0; background: rgba(255,255,255,0.7) !important; display: flex; color: black; text-decoration: none; } .item .title .linked-in:hover{ filter: grayscale(50%); } .item .title:hover { text-decoration: underline; } .item .title .linked-in { margin: 5px; } .item:hover { margin: 0; } .item:hover .summary{ display: block; } .item:hover .profile-picture { border-radius: 0%; padding: 10px; } @media (max-width: 860px) { .item .profile-picture { width: 280px; height: 280px; } } @media (max-width: 480px) { .team-banner { display: none; } } /* ------ PROFILE PICTURES ------ */ .item #mei-ju { background: url('https://static.igem.org/mediawiki/2018/4/42/T--Rotterdam_HR--mei-ju.jpeg'); background-size: 100%; } .item #dustin { background: url('https://static.igem.org/mediawiki/2018/3/39/T--Rotterdam_HR--dustin.jpeg'); background-size: 100%; } .item #suzanne { background: url('https://static.igem.org/mediawiki/2018/f/f3/T--Rotterdam_HR--suzanne.jpeg'); background-size: 100%; } .item #randall { background: url('https://static.igem.org/mediawiki/2018/8/80/T--Rotterdam_HR--randall.jpeg'); background-size: 100%; } .item #elise { background: url('https://static.igem.org/mediawiki/2018/e/e0/T--Rotterdam_HR--elise.jpeg'); background-size: 100%; } .item #paul { background: url('https://static.igem.org/mediawiki/2018/c/c0/T--Rotterdam_HR--paul.jpeg'); background-size: 100%; } .item #mike { background: url('https://static.igem.org/mediawiki/2018/f/f6/T--Rotterdam_HR--mike.jpeg'); background-size: 100%; } .item #loraine { background: url('https://static.igem.org/mediawiki/2018/9/99/T--Rotterdam_HR--loraine.jpeg'); background-size: 100%; } .item #tom { background: url('https://static.igem.org/mediawiki/2018/a/a4/T--Rotterdam_HR--tom.jpeg'); background-size: 100%; } .item #rens { background: url('https://static.igem.org/mediawiki/2018/9/98/T--Rotterdam_HR--rens.jpeg'); background-size: 100%; } .item #jos { background: url('https://static.igem.org/mediawiki/2018/5/51/T--Rotterdam_HR--jos.jpeg'); background-size: 100%; } .item #eric { background: url('https://static.igem.org/mediawiki/2018/a/a5/T--Rotterdam_HR--eric.jpeg'); background-size: 100%; } .item #esra { background: url('https://static.igem.org/mediawiki/2018/d/d4/T--Rotterdam_HR--esra.jpeg'); background-size: 100%; }

@@ Line 32: / Line 32: @@
 }
 .item {
-	transition: 0.2s;
+	transition: 200ms;
 	margin: 10px;
 	padding: 10px;
@@ Line 47: / Line 47: @@
 	height: 320px;
 	border-radius: 50%;
-	transition: 0.2s;
+	transition: all 200ms,
+							background-image 200ms 500ms;
 }
 .item .title {
@@ Line 165: / Line 166: @@
 	background-size: 100%;
 }
 .item:hover #loraine {
 	background: url('https://static.igem.org/mediawiki/2018/c/cb/T--Rotterdam_HR--loraine-extra.jpeg');
@@ Line 176: / Line 176: @@
 .item:hover #elise {
 	background: url('https://static.igem.org/mediawiki/2018/8/87/T--Rotterdam_HR--elise-extra.jpeg');
+	background-size: 100%;
+}
+.item:hover #paul {
+	background: url('https://static.igem.org/mediawiki/2018/8/8a/T--Rotterdam_HR--paul-extra.jpeg');
 	background-size: 100%;
 }