From cda5a9e2ca051490f156af3aa18af431a242e0d4 Mon Sep 17 00:00:00 2001
From: Jan Grewe <jan@faked.org>
Date: Sun, 24 Jan 2016 22:31:01 +0100
Subject: [PATCH] change background image on hover
---
css/mediarack.css | 23 +++++++++++++++++++++++
index.php | 2 ++
js/mediarack.js | 6 ++++++
3 files changed, 31 insertions(+)
diff --git a/css/mediarack.css b/css/mediarack.css
index 9f6c133..9f63ce6 100644
--- a/css/mediarack.css
+++ b/css/mediarack.css
@@ -4,13 +4,36 @@ html {
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: scroll;
+ background-color: none;
+ padding: 0px;
+ margin: 0px;
}
body {
padding-top: 70px;
font-family: 'Open Sans', sans-serif;
+
}
+#bg {
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ min-width: 100%;
+ min-height: 100%;
+ background: no-repeat center center fixed;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+ -webkit-filter: blur(5px);
+ -moz-filter: blur(5px);
+ -o-filter: blur(5px);
+ -ms-filter: blur(5px);
+ filter: blur(5px);
+}
+
+
.navbar-brand {
height: 50px;
padding-top: 0;
diff --git a/index.php b/index.php
index ffc0a5c..4bb3d9e 100644
--- a/index.php
+++ b/index.php
@@ -23,6 +23,8 @@ include_once 'config.php';
<body>
+ <div id="bg"></div>
+
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
diff --git a/js/mediarack.js b/js/mediarack.js
index b0f373a..b56c99d 100644
--- a/js/mediarack.js
+++ b/js/mediarack.js
@@ -165,6 +165,9 @@ function getShows() {
});
divInfo.fadeTo(0, seasonOpacity);
divContainer.hover(function() {
+ $('#bg').stop(true).fadeTo('slow', 0, function() {
+ $('#bg').css('background-image', 'url('+cdn('show/'+cleanname(show.folder)+'/fanart.jpg')+')');
+ }).fadeTo('slow', 1);
divInfo.fadeTo(300, 1);
}, function() {
divInfo.fadeTo(300, seasonOpacity);
@@ -265,6 +268,9 @@ function getMovies() {
var divRating =$('<div class="movieRating text-right">IMDB Rating: '+movie.rating+'</div>');
divInfo.fadeTo(0, seasonOpacity);
divContainer.hover(function() {
+ $('#bg').stop(true).fadeTo('slow', 0, function() {
+ $('#bg').css('background-image', 'url('+cdn('movie/'+cleanname(movie.folder)+'/fanart.jpg')+')');
+ }).fadeTo('slow', 1);
divInfo.fadeTo(300, 1);
}, function() {
divInfo.fadeTo(300, seasonOpacity);
--
GitLab