commit 7ccad725f7934ab5b4eaec88c6762436b7ff4f64 Author: tparnell Date: Sat Jan 26 08:56:48 2019 -0500 init diff --git a/1.jpg b/1.jpg new file mode 100644 index 0000000..421d310 Binary files /dev/null and b/1.jpg differ diff --git a/2.jpg b/2.jpg new file mode 100644 index 0000000..54c4a1b Binary files /dev/null and b/2.jpg differ diff --git a/3.jpg b/3.jpg new file mode 100644 index 0000000..fee0677 Binary files /dev/null and b/3.jpg differ diff --git a/4.jpg b/4.jpg new file mode 100644 index 0000000..078dd72 Binary files /dev/null and b/4.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..0565041 --- /dev/null +++ b/index.html @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + +
+

Mouse Over:

+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..13f3ef1 --- /dev/null +++ b/styles.css @@ -0,0 +1,59 @@ +.container { + max-width: 75%; + margin: 1em auto; +} + +.grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: 98vh; + grid-gap: 1vw; + margin: 0 auto; + max-width: 96rem; +} + +.column { + display: grid; + grid-template-columns: repeat(3, 4vw); + grid-template-rows: repeat(10, 8vh); + transition: 1s ease; +} + +.column:hover { + padding-right: 15vw; +} + +.column1 { + background-color: #CCF0E8; + opacity: 1; +} +.column1:hover { + opacity: 1; + background-image: url(1.jpg); + background-repeat: no-repeat; + background-size: cover; +} +.column2 { + background-color: #ffbdbd; +} +.column2:hover { + background-image: url(2.jpg); + background-repeat: no-repeat; + background-size: cover; +} +.column3 { + background-color: #A1CDE4; +} +.column3:hover { + background-image: url(3.jpg); + background-repeat: no-repeat; + background-size: cover; +} +.column4 { + background-color: #f1cbff; +} +.column4:hover { + background-image: url(4.jpg); + background-repeat: no-repeat; + background-size: cover; +} \ No newline at end of file