UI actions; Context menu

src/scss/app.scss

@@ -7,6 +7,7 @@
 @import 'global/reset';
 @import 'global/forms';
 
+@import 'components/context-menu';
 @import 'components/images';
 @import 'components/icon';
 @import 'components/sidebar';

src/scss/components/_context-menu.scss

@@ -0,0 +1,24 @@
+
+.context-menu {
+	position: fixed;
+	left: 0;
+	top: 0;
+	z-index: 9999;
+	background: $dark_grey;
+	color: #FFFFFF;
+
+	a {
+		display: block;
+		padding: 8px 12px;
+		width: 120px;
+
+		&:not(:first-child){
+			border-top: 1px solid lighten($dark_grey, 8%);
+		}
+
+		&:hover {
+			cursor: pointer;
+			background: lighten($dark_grey, 5%);
+		}
+	}
+}

src/scss/components/_grid.scss

@@ -11,6 +11,7 @@
 		border-bottom: 0;
 
 		.thumbnail {
+			@include animate();
 			max-width: 100%;
 		}
 
@@ -31,7 +32,10 @@
 
 		&:hover{
 			cursor: pointer;
-			opacity: 0.75;
+
+			.thumbnail {
+				opacity: 0.75;
+			}
 		}
 	}
 

src/scss/components/_sidebar.scss

@@ -12,10 +12,10 @@ aside{
 	
 	.thumbnail {
 		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
+		top: -30px;
+		right: -30px;
+		bottom: -30px;
+		left: -30px;
 		height: auto;
 		width: auto;
 		max-width: none;
@@ -23,6 +23,7 @@ aside{
 		opacity: 0.2;
 
 		.image {
+			@include blur();
 			padding-bottom: 0;
 			height: 100%;
 		}

src/scss/global/_variables.scss

@@ -25,4 +25,9 @@ $red: #cf2d2d;
 	   -moz-transition: all $speed ease-in-out;
 		 -o-transition: all $speed ease-in-out;
 		    transition: all $speed ease-in-out; 
+}
+
+@mixin blur( $size: 10px ) {
+	-webkit-filter: blur( $size );
+	filter: blur( $size );
 }