Week3 - Tour of Heroes

src/week1/day0/css/gallery.css

@@ -0,0 +1,86 @@
+/* Small screens (default) */
+html { 
+    font-size: 100%; 
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+
+/* Medium screens (640px) */
+@media (min-width: 40rem) { 
+  html { font-size: 112%; }
+}
+
+/* Large screens (1024px) */
+@media (min-width: 64rem) { 
+  html { font-size: 120%; }
+}
+
+@media (max-width: 350px) {
+    .container > h1 {
+        font-size: 3rem;
+    }
+}
+
+*, *:before, *:after {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.container {
+    margin: 0 auto;
+    max-width: 48rem;
+    width: 90%;
+  }
+
+.wrapper {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+h1 {
+    text-align: center;
+    font-weight: bolder;
+    font-size: 4rem;
+}
+
+.box {   
+    height: 15rem;
+    width: 15rem;
+    margin: 10px auto 10px auto;
+    border: #000000 2px solid;
+}
+
+img {
+    width: 100%;
+    height: inherit;
+    padding: 5px;
+}
+
+.title {
+    background-color: rgba(128, 128, 128, 0.7);
+    position: relative;
+    left:0;
+    top:-102.5%;
+    margin:0;
+    width: 100%;
+    height: 35%;
+    opacity: 0;
+    transition: all 0.6s ease-in-out;
+}
+
+.box:hover > .title {
+    opacity: 1;
+}
+
+p {
+    font-size: 2rem;
+    font-weight: bold;
+    color: #FFFFFF;
+    text-align: center;
+}
+
+p > span {
+    font-size: 1rem;
+    font-weight: 100;
+}