diff --git a/src/Grid.css b/src/Grid.css index b7872c6..4779ffd 100644 --- a/src/Grid.css +++ b/src/Grid.css @@ -102,6 +102,50 @@ font-family: monospace; } +.photo a { + display: block; + position: relative; + height: 100%; +} + +.photo header, .photo footer { + display: none; + position: absolute; + width: 100%; + z-index: 2; + + background: rgba(0, 0, 0, 0.4); + color: white; +} + +.photo header { + top: 0; + font-size: 1.5rem; + padding: 0.5rem; +} + +.photo footer { + bottom: 0; + justify-content: space-between; + padding: 0 1em; + font-size: 1rem; + font-family: monospace; +} + +.photo a:hover header { + display: block; +} + +.photo a:hover footer { + display: flex; +} + +.photo img { + position: absolute; + height: 100%; + left: 0; +} + @media all and (max-width: 120rem) { .grid-item { width: 25%; @@ -133,5 +177,15 @@ .grid-item { width: 100%; padding-bottom: 100%; + margin-bottom: 1rem; + } + .grid-item-content.photo { + padding: 0; + } + .photo a header { + display: block; + } + .photo a footer { + display: flex; } } diff --git a/src/Grid.js b/src/Grid.js index d937c7b..d0d8874 100644 --- a/src/Grid.js +++ b/src/Grid.js @@ -10,6 +10,11 @@ import switch1 from './switch1.jpg'; import pump1 from './pump1.jpg'; import hand1 from './hand1.jpg'; +import banff1 from './banff1.jpg'; +import bee1 from './bee1.jpg'; +import canmore1 from './canmore1.jpg'; +import carshow1 from './carshow1.jpg'; + //function importAll(r) { // return r.keys().map(x => r(x)); //} @@ -22,9 +27,9 @@ class Grid extends React.Component { return (
- Tanner Collin signature +
- Tanner +
); } diff --git a/src/banff1.jpg b/src/banff1.jpg new file mode 100644 index 0000000..fb8b997 Binary files /dev/null and b/src/banff1.jpg differ diff --git a/src/bee1.jpg b/src/bee1.jpg new file mode 100644 index 0000000..2f4e25e Binary files /dev/null and b/src/bee1.jpg differ diff --git a/src/canmore1.jpg b/src/canmore1.jpg new file mode 100644 index 0000000..430dbdb Binary files /dev/null and b/src/canmore1.jpg differ diff --git a/src/carshow1.jpg b/src/carshow1.jpg new file mode 100644 index 0000000..9c46a70 Binary files /dev/null and b/src/carshow1.jpg differ