brightness filter

src/files/css/main.css

@@ -53,6 +53,110 @@
   display: block;
   content: ''; }
 
+@-webkit-keyframes brightnessOff {
+  0% {
+    -webkit-filter: brightness(100%);
+    -moz-filter: brightness(100%);
+    -ms-filter: brightness(100%);
+    -o-filter: brightness(100%);
+    filter: brightness(100%); }
+  100% {
+    -webkit-filter: brightness(70%);
+    -moz-filter: brightness(70%);
+    -ms-filter: brightness(70%);
+    -o-filter: brightness(70%);
+    filter: brightness(70%); } }
+@-moz-keyframes brightnessOff {
+  0% {
+    -webkit-filter: brightness(100%);
+    -moz-filter: brightness(100%);
+    -ms-filter: brightness(100%);
+    -o-filter: brightness(100%);
+    filter: brightness(100%); }
+  100% {
+    -webkit-filter: brightness(70%);
+    -moz-filter: brightness(70%);
+    -ms-filter: brightness(70%);
+    -o-filter: brightness(70%);
+    filter: brightness(70%); } }
+@-ms-keyframes brightnessOff {
+  0% {
+    -webkit-filter: brightness(100%);
+    -moz-filter: brightness(100%);
+    -ms-filter: brightness(100%);
+    -o-filter: brightness(100%);
+    filter: brightness(100%); }
+  100% {
+    -webkit-filter: brightness(70%);
+    -moz-filter: brightness(70%);
+    -ms-filter: brightness(70%);
+    -o-filter: brightness(70%);
+    filter: brightness(70%); } }
+@keyframes brightnessOff {
+  0% {
+    -webkit-filter: brightness(100%);
+    -moz-filter: brightness(100%);
+    -ms-filter: brightness(100%);
+    -o-filter: brightness(100%);
+    filter: brightness(100%); }
+  100% {
+    -webkit-filter: brightness(70%);
+    -moz-filter: brightness(70%);
+    -ms-filter: brightness(70%);
+    -o-filter: brightness(70%);
+    filter: brightness(70%); } }
+@-webkit-keyframes brightnessOn {
+  0% {
+    -webkit-filter: brightness(70%);
+    -moz-filter: brightness(70%);
+    -ms-filter: brightness(70%);
+    -o-filter: brightness(70%);
+    filter: brightness(70%); }
+  100% {
+    -webkit-filter: brightness(100%);
+    -moz-filter: brightness(100%);
+    -ms-filter: brightness(100%);
+    -o-filter: brightness(100%);
+    filter: brightness(100%); } }
+@-moz-keyframes brightnessOn {
+  0% {
+    -webkit-filter: brightness(70%);
+    -moz-filter: brightness(70%);
+    -ms-filter: brightness(70%);
+    -o-filter: brightness(70%);
+    filter: brightness(70%); }
+  100% {
+    -webkit-filter: brightness(100%);
+    -moz-filter: brightness(100%);
+    -ms-filter: brightness(100%);
+    -o-filter: brightness(100%);
+    filter: brightness(100%); } }
+@-ms-keyframes brightnessOn {
+  0% {
+    -webkit-filter: brightness(70%);
+    -moz-filter: brightness(70%);
+    -ms-filter: brightness(70%);
+    -o-filter: brightness(70%);
+    filter: brightness(70%); }
+  100% {
+    -webkit-filter: brightness(100%);
+    -moz-filter: brightness(100%);
+    -ms-filter: brightness(100%);
+    -o-filter: brightness(100%);
+    filter: brightness(100%); } }
+@keyframes brightnessOn {
+  0% {
+    -webkit-filter: brightness(70%);
+    -moz-filter: brightness(70%);
+    -ms-filter: brightness(70%);
+    -o-filter: brightness(70%);
+    filter: brightness(70%); }
+  100% {
+    -webkit-filter: brightness(100%);
+    -moz-filter: brightness(100%);
+    -ms-filter: brightness(100%);
+    -o-filter: brightness(100%);
+    filter: brightness(100%); } }
 /*!
  * Bootstrap v3.3.2 (http://getbootstrap.com)
  * Copyright 2011-2015 Twitter, Inc.
@@ -9707,6 +9811,16 @@ img {
   max-width: 100%;
   text-align: center;
   margin: 20px 0; }
+  .additional-info__item img:hover {
+    -o-animation: brightness 0.5s;
+    -moz-animation: brightness 0.5s;
+    -webkit-animation: brightness 0.5s;
+    animation: brightness 0.5s;
+    -webkit-filter: brightnessOff(70%);
+    -moz-filter: brightnessOff(70%);
+    -ms-filter: brightnessOff(70%);
+    -o-filter: brightnessOff(70%);
+    filter: brightnessOff(70%); }
 
 .feedback-form {
   width: 100%;

src/files/scss/_additional-info-blocks.scss

@@ -7,5 +7,12 @@
         max-width: 100%;
         text-align: center;
         margin: 20px 0;
+
+        img {
+            &:hover {
+                @include animation(brightness $__themeImg-brightness-animation-duration);
+                @include filter(brightnessOff, $__themeImg-brightness-min);
+            }
+        }
     }
 }

src/files/scss/_mixins.scss

@@ -9,4 +9,53 @@
     display: block;
     content: '';
   }
+}
+
+@mixin keyframes($name) {
+  @-webkit-keyframes #{$name}{
+    @content;
+  }
+  @-moz-keyframes #{$name} {
+    @content;
+  }
+  @-ms-keyframes #{$name} {
+    @content;
+  }
+  @keyframes #{$name} {
+    @content;
+  }
+}
+
+@mixin filter($filter-type,$filter-amount) {
+  -webkit-filter: $filter-type+unquote( '(#{$filter-amount})');
+  -moz-filter: $filter-type+unquote( '(#{$filter-amount})');
+  -ms-filter: $filter-type+unquote( '(#{$filter-amount})');
+  -o-filter: $filter-type+unquote( '(#{$filter-amount})');
+  filter: $filter-type+unquote( '(#{$filter-amount})');
+}
+@mixin animation($animation...) {
+  -o-animation: $animation;
+  -moz-animation: $animation;
+  -webkit-animation: $animation;
+  animation: $animation;
+}
+
+@include keyframes(brightnessOff) {
+  0% {
+    @include filter(brightness, $__themeImg-brightness-max);
+  }
+
+  100% {
+    @include filter(brightness, $__themeImg-brightness-min);
+  }
+}
+
+@include keyframes(brightnessOn) {
+  0% {
+    @include filter(brightness, $__themeImg-brightness-min);
+  }
+
+  100% {
+    @include filter(brightness, $__themeImg-brightness-max);
+  }
 }

src/files/scss/_variables.scss

@@ -5,4 +5,8 @@ $organization-list-selector: 'organization-list';
 
 
 $fontcuprum: 'Cuprum', Impact, "Charcoal CY", sans-serif;
-$fontopensans: 'Open Sans', Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
+$fontopensans: 'Open Sans', Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
+
+$__themeImg-brightness-max: 100%;
+$__themeImg-brightness-min: 70%;
+$__themeImg-brightness-animation-duration: 0.5s;