diff --git a/website/static/website/css/base.css b/website/static/website/css/base.css
index 7cff1c39..394b1845 100644
--- a/website/static/website/css/base.css
+++ b/website/static/website/css/base.css
@@ -329,6 +329,74 @@ h5 {
     font-size: small;
 }
 
+/* add this class to the container element for any images 
+   you would apply the zoom / darken effect to on hover */	
+.artifact-thumbnail-hover {
+	position: relative;
+	overflow: hidden;
+}
+
+.artifact-thumbnail-hover img {
+	/* can uncomment these lines to change the origin of the zoom */
+	/*-webkit-transform-origin: top left;
+	transform-origin: top left;*/
+}
+
+.artifact-thumbnail-hover:hover img {
+	-webkit-transform: scale(1.2);
+	transform: scale(1.2);
+}
+
+.artifact-thumbnail-hover img {
+	-webkit-transition: 0.6s ease;
+	transition: 0.6s ease;
+}
+
+.artifact-overlay {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	display: table;
+	
+	opacity: 0%;
+	-webkit-transition: 0.6s ease;
+	transition: 0.6s ease;
+}
+
+.artifact-overlay:hover {
+	opacity: 100%;
+	background-color: rgba(0,0,0,0.5);
+}
+
+.artifact-overlay-content {
+	width: 100%;
+	text-align: center;
+	font-size: x-large;
+	color: #fff;
+	display: none;
+	line-height: 50px;
+}
+
+.artifact-overlay-content a {
+	color: #fff;
+	border: 1px solid white;
+	border-radius: 3px;
+	padding: 5px;
+	margin: 4px;
+}
+
+.artifact-overlay-content a:hover {
+	text-decoration: none;
+	color: #ddd;
+}
+
+.artifact-overlay:hover>.artifact-overlay-content {
+	display: table-cell;
+	vertical-align: middle;
+}
+
 /***************************************************/
 /************* Makeability Lab footer **************/
 
diff --git a/website/templates/website/talks.html b/website/templates/website/talks.html
index a54d7025..f6cddb06 100644
--- a/website/templates/website/talks.html
+++ b/website/templates/website/talks.html
@@ -129,10 +129,18 @@
             <h1 class="group-template row" name="Group Name"></h1>
             <div class="talk-template col-ts-12 col-xs-6 col-sm-6 col-md-4 col-lg-3">
             	<div class="talk-info">
-                    <div class="talk-thumbnail">
+                    <div class="talk-thumbnail artifact-thumbnail-hover">
                         <a href="link" class="talk-thumbnail-link">
                             <img src="" class="talk-thumbnail-image img-responsive"/>
                         </a>
+                        <div class="artifact-overlay">
+                            <div class="artifact-overlay-content">
+                                <a href="link" class="talk-pdf-link">PDF</a>
+                                <a href="link" class="talk-pptx-link">PPTX</a>
+                                <a href="link" class="talk-slideshare-link">Slideshare</a>
+                                <a href="link" class="talk-video-link">Video</a>
+                            </div>
+                        </div>
                     </div>
                     <p class="talk-title line-clamp">Paper Title</p>
                     <p class="talk-speakers">
@@ -143,12 +151,12 @@ <h1 class="group-template row" name="Group Name"></h1>
         				<span class="talk-date">Talk Date</span> | 
                     	<span class="talk-location">Talk Location</span>
     	    		</p>
-        			<div class="talk-download">
+        			<!-- <div class="talk-download">
                 		<a href="link" class="talk-pdf-link">PDF</a>
                     	<span class="decor_pptx"> | </span><a href="link" class="talk-pptx-link">PPTX</a>
                     	<span class="decor_slideshare"> | </span><a href="link" class="talk-slideshare-link">Slideshare</a>
                     	<span class="decor_video"> | </span><a href="link" class="talk-video-link">Video</a>
-                    </div>
+                    </div> -->
                 </div>
             </div>
         </div>