Make the image on the front page a clickable link to our test game in the web player

Author: Ghabry

content/css/easyrpg.scss

@@ -117,6 +117,31 @@ $darkgrey: #202020;
 		text-align: center;
 		padding: 1.5em 0;
 
+		#play-overlay {
+			position: relative;
+			display: inline-block;
+
+			a {
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				color: $lightgrey;
+				background: rgba(0, 0, 0, 0.6);
+				font-size: 24px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				opacity: 0;
+				transition: opacity 0.3s ease;
+
+				&:hover {
+					opacity: 1;
+				}
+			}
+		}
+
 		img {
 			vertical-align: middle;
 		}

content/index.html

@@ -17,9 +17,14 @@ <h1>Play your own RPG games anywhere</h1>
 					Learn more about EasyRPG</a>
 			</p>
 		</div>
-		<img src="/images/easyrpg-player.png"
-			alt="EasyRPG Player screenshot"
-			title="EasyRPG Player">
+		<div id="play-overlay">
+			<img src="/images/easyrpg-player.png"
+				alt="EasyRPG Player screenshot"
+				title="EasyRPG Player">
+			<a href="https://easyrpg.org/play/">
+				Play our sample game
+			</a>
+		</div>
 	</div>
 </div>
 <div id="content">