Slideshow - add gradient overlay.

src/index.html

@@ -147,6 +147,53 @@
 								</p>
 							</figcaption>
 						</figure>
+						<figure style="--color: pink;">
+							<img src="../img/thumbnails/animal.jpg"
+								 alt="Animal">
+							<figcaption>
+								<header>
+									Woman jailed for life for harming animal
+								</header>
+								<p>
+									"The evidence we have is that he was using the fence as a bat or a mouse catcher,"
+									said Tessler. "There are numerous locations throughout the property where he is
+									reasonably suspected to have killed wildlife."
+
+									"We are very concerned and shocked by the evidence we've gathered," said Pierre
+									Baillargeon, the president of the Committee for the Protection of Wildlife in
+									Quebec. "He (Paulus) had an expansive knowledge of this area."
+
+									Alberta government says wildlife rehabilitators arrested in criminal plot to
+									control. </p>
+							</figcaption>
+						</figure>
+						<figure style="--color: black;">
+							<video
+									autoplay
+									loop
+									src="../img/thumbnails/hecomes.gif"
+							>
+								He comes
+							</video>
+							<figcaption>
+								<header>
+									HE IS COMING
+								</header>
+								<p>
+									He is coming down the corridor, actually, it's an
+									old block building with a gas station, and this is
+									how it looks when you walk by and know it's your
+									business," he said.
+
+									The barber by day and the builder by night is
+									Matthew Perrone, 37. Perrone moved to Georgetown in
+									2011 to make a difference. He met with McAuliffe on
+									one of those "meet-the-bureaucrat-and-prove-your-idea"
+									sessions, and they struck a deal. Perrone would not
+									give him his barber's license.
+								</p>
+							</figcaption>
+						</figure>
 					</div>
 				</div>
 				<div id="right" class="controls">

src/styles/main.scss

@@ -17,32 +17,35 @@ body > main {
 			font-size: 5rem;
 			color: $secondary;
 			cursor: pointer;
-			transition: transform 1s ease-out;
+			transition: transform 2s ease-out;
 
 			&.inactive {
 				color: gray;
 				cursor: default;
-				transition-duration: 2s;
+				transition-duration: 1s;
 				transition-timing-function: ease-in;
 
 				&#left {
-					transform: rotate(0.5turn);
+					transform: rotateY(0.5turn);
 				}
 
 				&#right {
-					transform: rotate(-0.5turn);
+					transform: rotateY(-0.5turn);
 				}
 			}
 		}
 
 		#slideshow-container {
+			border: 1rem solid $secondary;
+			border-radius: 5px;
 			position: relative;
 			width: 80%;
-			height: 100vh;
+			height: 80vh;
 			display: flex;
 			justify-content: center;
 			align-items: center;
 			overflow: hidden;
+
 			#inner-slideshow {
 				width: 100%;
 				height: 100%;
@@ -54,17 +57,32 @@ body > main {
 				transition: transform 500ms ease-out;
 
 				figure {
-					min-width: 100%;
-					position: relative;
 					$color: var(--color);
 
-					img {
+					min-width: 100%;
+					position: relative;
+
+					&:after {
+						position: absolute;
+						content: '';
+						top: 0;
+						left: 0;
+						width: 100%;
+						height: 100%;
+						background: linear-gradient(to top, $color, rgba(1, 1, 1, 0));
+						background-blend-mode: soft-light;
+						opacity: 70%;
+						z-index: 0;
+					}
+
+					img, video {
 						min-width: 100%;
 						min-height: 100%;
 						height: auto;
 						width: auto;
 						object-position: center;
 						object-fit: cover;
+						position: relative;
 					}
 
 					figcaption {
@@ -73,15 +91,32 @@ body > main {
 						left: 0;
 						margin: 2rem;
 
+
 						header {
 							font-weight: 800;
-							font-size: 1.5rem;
+							font-size: 2rem;
 							font-family: 'Bungee Inline', serif;
 							margin-bottom: 2rem;
-							background-color: $color;
+							//background-color: $color;
 							width: fit-content;
 							color: white;
 							padding: 0.5rem;
+							z-index: 12;
+							position: relative;
+							text-shadow: 10px 10px 5px transparentize(white, 0.7);
+
+							&:after {
+								background-color: $color;
+								position: absolute;
+								content: '';
+								top: 0;
+								left: 0;
+								width: 100%;
+								height: 100%;
+								z-index: -1;
+								padding: 0 10rem 0 0;
+								transform: translateX(-2rem) skewX(-20deg);
+							}
 						}
 
 						p {
@@ -104,6 +139,14 @@ body > main {
 								left: 0;
 								z-index: -1;
 							}
+
+							&:after {
+								content: 'Read more';
+								color: black;
+								font-weight: 800;
+								background-color: $color;
+								cursor: pointer;
+							}
 						}
 					}
 				}