diff --git a/.gitignore b/.gitignore
index f0d2757..5e84aaf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@
 node_modules
 /dist
 .idea
+examples/custom-theme.css
diff --git a/examples/custom-theme.html b/examples/custom-theme.html
index c9d4965..833bbf9 100644
--- a/examples/custom-theme.html
+++ b/examples/custom-theme.html
@@ -3,7 +3,7 @@
 <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   <title>perfect-scrollbar example</title>
-  <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
+  <link href="custom-theme.css" rel="stylesheet">
   <script src="../dist/js/perfect-scrollbar.js"></script>
   <style>
     .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
@@ -19,7 +19,7 @@
   var $ = document.querySelector.bind(document);
   window.onload = function () {
     Ps.initialize($('#Default'), {
-      theme: 'big-and-ugly'
+      theme: 'custom-theme'
     });
   };
 </script>
diff --git a/examples/custom-theme.scss b/examples/custom-theme.scss
new file mode 100644
index 0000000..14191f4
--- /dev/null
+++ b/examples/custom-theme.scss
@@ -0,0 +1,12 @@
+@import '../src/css/main';
+
+.ps-theme-custom-theme {
+  @include ps-container(map-merge($ps-theme-default, (
+          border-radius: 0,
+          scrollbar-x-rail-height: 20px,
+          scrollbar-x-height: 20px,
+          scrollbar-y-rail-width: 20px,
+          scrollbar-y-width: 20px,
+          scrollbar-rail-scale-hover: 1.5
+  )));
+}
diff --git a/gulpfile.js b/gulpfile.js
index 3c0d33f..b339937 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -83,7 +83,7 @@ gulp.task('js:min', ['clean:js:min'], function () {
 });
 
 gulp.task('clean:css', function () {
-  return del(['./dist/css/perfect-scrollbar.css']);
+  return del(['./dist/css/perfect-scrollbar.css', './examples/custom-theme.css']);
 });
 
 gulp.task('clean:css:min', function () {
@@ -91,13 +91,25 @@ gulp.task('clean:css:min', function () {
 });
 
 gulp.task('css', ['clean:css'], function () {
-  return gulp.src('./src/css/main.scss')
+  var main = gulp
+    .src('./src/css/main.scss')
     .pipe(sass())
     .pipe(autoprefixer(autoPrefixerConfig))
     .pipe(insert.prepend(version))
     .pipe(rename('perfect-scrollbar.css'))
     .pipe(gulp.dest('./dist/css'))
     .pipe(connect.reload());
+
+  var custom = gulp
+    .src('./examples/custom-theme.scss')
+    .pipe(sass())
+    .pipe(autoprefixer(autoPrefixerConfig))
+    .pipe(insert.prepend(version))
+    .pipe(rename('custom-theme.css'))
+    .pipe(gulp.dest('./examples'))
+    .pipe(connect.reload());
+
+  return stream.concat(main, custom);
 });
 
 gulp.task('css:min', ['clean:css:min'], function () {
diff --git a/src/css/mixins.scss b/src/css/mixins.scss
index ae5a309..6c0ff9a 100644
--- a/src/css/mixins.scss
+++ b/src/css/mixins.scss
@@ -3,7 +3,7 @@
   position: absolute; /* please don't change 'position' */
   border-radius: map_get($theme, border-radius);
   opacity: map_get($theme, rail-default-opacity);
-  transition: background-color .2s linear, opacity .2s linear;
+  transition: background-color .2s linear, opacity .2s linear, height .2s linear, width .2s ease-in-out;;
 }
 
 @mixin scrollbar-rail-hover($theme) {
@@ -15,7 +15,7 @@
   position: absolute; /* please don't change 'position' */
   background-color: map_get($theme, bar-container-hover-bg);
   border-radius: map_get($theme, border-radius);
-  transition: background-color .2s linear;
+  transition: background-color .2s linear, height .2s linear, width .2s ease-in-out;
 }
 
 @mixin scrollbar-hover($theme) {
@@ -69,6 +69,14 @@
     bottom: map_get($theme, scrollbar-x-rail-bottom); /* there must be 'bottom' for ps-scrollbar-x-rail */
     height: map_get($theme, scrollbar-x-rail-height);
 
+    &:hover,
+    &:active {
+      height: map_get($theme, scrollbar-rail-scale-hover) * map_get($theme, scrollbar-x-rail-height);
+      > .ps-scrollbar-x {
+        height: map_get($theme, scrollbar-rail-scale-hover) * map_get($theme, scrollbar-x-rail-height);
+      }
+    }
+
     > .ps-scrollbar-x {
       @include scrollbar-default($theme);
       bottom: map_get($theme, scrollbar-x-bottom); /* there must be 'bottom' for ps-scrollbar-x */
@@ -81,6 +89,14 @@
     right: map_get($theme, scrollbar-y-rail-right); /* there must be 'right' for ps-scrollbar-y-rail */
     width: map_get($theme, scrollbar-y-rail-width);
 
+    &:hover,
+    &:active {
+      width: map_get($theme, scrollbar-rail-scale-hover) * map_get($theme, scrollbar-y-rail-width);
+      > .ps-scrollbar-y {
+        width: map_get($theme, scrollbar-rail-scale-hover) * map_get($theme, scrollbar-y-rail-width);
+      }
+    }
+
     > .ps-scrollbar-y {
       @include scrollbar-default($theme);
       right: map_get($theme, scrollbar-y-right); /* there must be 'right' for ps-scrollbar-y */
diff --git a/src/css/themes.scss b/src/css/themes.scss
index af6defe..9a7dce7 100644
--- a/src/css/themes.scss
+++ b/src/css/themes.scss
@@ -7,6 +7,7 @@ $ps-theme-default: (
   bar-container-hover-bg: $ps-bar-container-hover-bg,
   bar-hover-bg: $ps-bar-hover-bg,
   rail-hover-bg: $ps-rail-hover-bg,
+  scrollbar-rail-scale-hover: $ps-scrollbar-rail-scale-hover,
   scrollbar-x-rail-bottom: $ps-scrollbar-x-rail-bottom,
   scrollbar-x-rail-height: $ps-scrollbar-x-rail-height,
   scrollbar-x-bottom: $ps-scrollbar-x-bottom,
diff --git a/src/css/variables.scss b/src/css/variables.scss
index d67c156..0f3a34b 100644
--- a/src/css/variables.scss
+++ b/src/css/variables.scss
@@ -11,6 +11,7 @@ $ps-bar-hover-bg: #999 !default;
 $ps-rail-hover-bg: #eee !default;
 
 // Sizes
+$ps-scrollbar-rail-scale-hover: 1 !default;
 $ps-scrollbar-x-rail-bottom: 3px !default;
 $ps-scrollbar-x-rail-height: 8px !default;
 $ps-scrollbar-x-bottom: 0 !default;
