Experimenting with hover tile effects

src/js/components/Thumbnail.js

@@ -48,7 +48,7 @@ class Thumbnail extends React.Component{
 
 	render(){
 		var image = this.mapImageSizes();
-		var class_name = 'thumbnail ';
+		var class_name = 'thumbnail thumbnail--loaded';
 		if (this.props.size){
 			class_name += ' thumbnail--'+this.props.size;
 		}
@@ -63,17 +63,11 @@ class Thumbnail extends React.Component{
 		if (this.props.canZoom && image){
 			zoom_icon = <Link className="thumbnail__zoom" to={global.baseURL+'image-zoom?url='+image}><Icon name="search" /></Link>;
 		}
-		
-		var glow = null;
-		if (!this.props.noGlow && image){
-			glow = <div className="thumbnail__glow" style={{backgroundImage: 'url("'+image+'")'}}></div>;
-		}
 
 		return (
 			<div className={class_name}>
-				<div className="thumbnail__image thumbnail__image--loaded" style={{backgroundImage: 'url("'+(image ? image : require('../../assets/no-image.svg'))+'")'}}></div>
+				<div className="thumbnail__image" style={{backgroundImage: 'url("'+(image ? image : require('../../assets/no-image.svg'))+'")'}}></div>
 				{zoom_icon}
-				{glow}
 			</div>
 		);
 	}

src/js/views/Playlist.js

@@ -137,7 +137,7 @@ class Playlist extends React.Component{
 				return (
 					<div className="actions">
 						<button className="button button--primary" onClick={ e => this.play() }>Play</button>
-						<Link className="button" to={global.baseURL+'playlist/'+encodeURIComponent(this.props.params.uri)+'/edit'}>Edit</Link>
+						<Link className="button button--default" to={global.baseURL+'playlist/'+encodeURIComponent(this.props.params.uri)+'/edit'}>Edit</Link>
 						<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
 					</div>
 				)
@@ -147,7 +147,7 @@ class Playlist extends React.Component{
 					return (
 						<div className="actions">
 							<button className="button button--primary" onClick={ e => this.play() }>Play</button>
-							<Link className="button" to={global.baseURL+'playlist/'+encodeURIComponent(this.props.params.uri)+'/edit'}>Edit</Link>
+							<Link className="button button--default" to={global.baseURL+'playlist/'+encodeURIComponent(this.props.params.uri)+'/edit'}>Edit</Link>
 							<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
 						</div>
 					)

src/scss/components/_grid.scss

@@ -6,6 +6,7 @@
 		vertical-align: top;
 		border-bottom: 0;
 		position: relative;
+		cursor: pointer;
 
 		&__wrapper {
 			display: inline-block;
@@ -32,10 +33,8 @@
 			}
 		}
 
-		&:hover{
-			cursor: pointer;
-
-			&__thumbnail {
+		&:hover{			
+			.thumbnail {
 				opacity: 0.75;
 			}
 		}

src/scss/components/_images.scss

@@ -21,22 +21,6 @@
 		}
 	}
 
-	&__glow {
-		@include blur(20px);
-		@include animate();
-		position: absolute;
-		top: 40%;
-		right: 10%;
-		bottom: -3.5%;
-		left: 10%;
-		opacity: 0.4;
-		z-index: 1;
-		background-repeat: no-repeat;
-		background-position: 50% 50%;
-		background-size: cover;
-		border-radius: 3px;
-	}
-
 	&__zoom {
 		@include animate();
 		display: none;
@@ -80,14 +64,6 @@
 			&__zoom {
 				display: block;
 			}
-
-			&__glow {
-				@include blur(25px);
-				right: 15%;
-				bottom: -5%;
-				left: 15%;
-				opacity: 0.3;
-			}
 		}
 	}
 }

src/scss/global/_core.scss

@@ -252,12 +252,12 @@ p {
 }
 
 .hide {
-	width: 0px;
-	height: 0px;
-	position: fixed;
-	z-index: -99;
-	top: -99px;
-	left: -99px;
+	width: 0px !important;
+	height: 0px !important;
+	position: fixed !important;
+	z-index: -99 !important;
+	top: -99px !important;
+	left: -99px !important;
 }
 
 .no-results {