Add hover

css/icons.scss

@@ -21,4 +21,9 @@
  *
  */
 
-@include icon-black-white('vueexample', 'app', 1);
+.icon-folder.icon-dark {
+	@include icon-color('folder', 'filetypes', $color-black, 1, true);
+}
+
+@include icon-black-white('photos', 'photos', 2);
+@include icon-black-white('yourphotos', 'photos', 1);

src/App.vue

@@ -2,7 +2,7 @@
 	<Content :class="{'icon-loading': loading}" app-name="betterphotos">
 		<AppNavigation>
 			<template id="app-betterphotos-navigation" #list>
-				<AppNavigationItem icon="icon-user" title="Timeline">
+				<AppNavigationItem icon="icon-yourphotos" title="Timeline">
 				</AppNavigationItem>
 			</template>
 		</AppNavigation>

src/Timeline.vue

@@ -20,7 +20,8 @@
                 class="photo-row"
                 v-bind:style="{ height: rowHeight + 'px' }">
 
-                <img v-for="img of item.photos"
+                <div class="photo" v-for="img of item.photos">
+                    <img
                         :src="img.src" :key="img.file_id"
                         @load = "img.l = Math.random()"
                         v-bind:style="{
@@ -28,6 +29,7 @@
                             height: rowHeight + 'px',
                         }"/>
                 </div>
+            </div>
         </RecycleScroller>
 
         <div ref="timelineScroll" class="timeline-scroll"
@@ -328,6 +330,12 @@ export default {
     width: calc(100% + 20px);
 }
 
+.photo-row .photo {
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+}
+
 .photo-row img {
     background-clip: content-box;
     background-color: #eee;
@@ -335,6 +343,23 @@ export default {
     object-fit: cover;
     border-radius: 3%;
 }
+
+.photo-row .photo::before {
+    content: "";
+    position: absolute;
+    display: block;
+    height: calc(100% - 4px);
+    width: calc(100% - 4px);
+    top: 2px; left: 2px;
+    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 90%);
+    opacity: 0;
+    border-radius: 3%;
+    transition: opacity .1s ease-in-out;
+}
+.photo-row .photo:hover::before {
+    opacity: 1;
+}
+
 .head-row {
     height: 40px;
     padding-top: 13px;