diff --git a/ImgHtml.cc b/ImgHtml.cc
index 49a55fa..fbefe80 100644
--- a/ImgHtml.cc
+++ b/ImgHtml.cc
@@ -300,6 +300,16 @@ li.dropdown {\
 @media screen and (max-width: 400px) {\
   ul li { float: none; } \
 }\
+.visible\
+{\
+ opacity: 1;\
+ transition: opacity 1s ease;\
+}\
+.faded\
+{\
+ opacity: 0.2;\
+ transition: opacity 1s ease;\
+}\
 </style>\n";
 
 
@@ -472,8 +482,8 @@ li.dropdown {\
 
 const char*  ImgHtmlFlexboxSlide::_jsblock()
 {
-    static const char*  js = "<script>\n$(function() {\n// Select all links with hashes\n$('a[href*=\"\\\\#\"]')\n  // Remove links that don't actually link to anything\n  .not('[href=\"\\\\#\"]')\n  .not('[href=\"\\\\#0\"]')\n  .click(function(event) {\n    // On-page links\n    if (\n      location.pathname.replace(/^\\//, '') == this.pathname.replace(/^\\//, '')\n      &&\n      location.hostname == this.hostname\n    ) {\n      // Figure out element to scroll to\n      var target = $(this.hash);\n      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');\n      // Does a scroll target exist?\n      if (target.length) {\n        // Only prevent default if animation is actually gonna happen\n        event.preventDefault();\n        $('html, body').animate({\n          scrollTop: target.offset().top\n        }, 1000, function() {\n          // Callback after animation\n          // Must change focus!\n          var $target = $(target);\n          $target.focus();\n          if ($target.is(\":focus\")) { // Checking if the target was focused\n            return false;\n          } else {\n            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable\n            $target.focus(); // Set focus again\n          };\n        });\n      }\n    }\n  });\n});\n</script>\
-\n<script>\n$(document).ready(function() {\n    var i = 0;\n    var len = $('div[id^=\"photo_block\"]').length;\n\n    function  _scrollNext() {\n\ti = ++i % len;\n\tvar target = \"#photo_block\" + i;\n\t$('html,body').animate({scrollTop: $(target).offset().top}, 1000)\n    };\n    function _scrollPrev() {\n\tif (!i) i = len;\n\t--i;\n\tvar target = \"#photo_block\" + i;\n\t$('html,body').animate({scrollTop: $(target).offset().top}, 1000)\n    };\n\n\n    $('#next').click(function() {\n\t_scrollNext();\n\treturn false;\n    });\n\n    $('#prev').click(function() {\n\t_scrollPrev();\n\treturn false;\n    });\n\n    var rating_hide = 0;\n\n    function _toggleRatings(r_)\n    {\n        $('.flex-item').each(function(){\n\t    var  item_rating = $(this).attr(\"rating\");\n\t    if (rating_hide == 1) {\n\t        $(this).fadeTo(750, 1);\n\t    }\n\t    else {\n\t\tif (item_rating < r_) {\n\t\t    $(this).fadeTo(750, 0.2);\n\t\t}\n\t\telse {\n\t\t    $(this).fadeTo(750, 1);\n\t\t}\n\t    }\n\t});\n\t\n\tif (rating_hide == 1) {\n\t    $('.ToggleRatings').text(\"Only Show Rated (showing all)\");\n\t}\n\telse {\n\t    $('.ToggleRatings').text(\"Show All (showing rated)\");\n\t}\n\trating_hide = !rating_hide;\n    }\n    function _showRatingGT(r_)\n    {\n        $('.flex-item').each(function(){\n\t    var  item_rating = $(this).attr(\"rating\");\n\t    if (item_rating < r_) {\n\t        $(this).fadeTo(750, 0.2);\n\t    }\n\t    else {\n\t\t$(this).fadeTo(750, 1);\n\t    }\n\t});\n\t$('.ToggleRatings').text(\"Show All \" + \"(showing >=\" + r_ + \")\");\n\trating_hide = 0;\n    }\n\n    $('body').keydown(function(evnt) \n    {\n        switch (evnt.keyCode) {\n\t    case 74:\n\t    case 39:\n\t\tevnt.preventDefault();\n\t\t_scrollNext();\n\t\tbreak;\n\n\t    case 75:\n\t    case 37:\n\t\tevnt.preventDefault();\n\t\t_scrollPrev();\n\t\tbreak;\n\n\t    case 48:  //0\n\t    case 49:\n\t    case 50:\n\t    case 51:\n\t    case 52:\n\t    case 53:\n\t        _showRatingGT(evnt.keyCode - 48);\n\t\tbreak;\n\n\t    case 82:  //r\n\t         _toggleRatings(1);\n\t\t break;\n\t}\n    });\n\n    $('#toggle_ratings').click(function() {\n        _toggleRatings(1);\n    });\n});\n</script>\n";
+    static const char*  js = "<script>\n$(function() {\n// Select all links with hashes\n$('a[href*=\"\\\\#\"]')\n  // Remove links that don't actually link to anything\n  .not('[href=\"\\\\#\"]')\n  .not('[href=\"\\\\#0\"]')\n  .click(function(event) {\n    // On-page links\n    if (\n      location.pathname.replace(/^\\//, '') == this.pathname.replace(/^\\//, '')\n      &&\n      location.hostname == this.hostname\n    ) {\n      // Figure out element to scroll to\n      var target = $(this.hash);\n      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');\n      // Does a scroll target exist?\n      if (target.length) {\n        // Only prevent default if animation is actually gonna happen\n        event.preventDefault();\n        $('html, body').animate({\n          scrollTop: target.offset().top\n        }, 1000, function() {\n          // Callback after animation\n          // Must change focus!\n          var $target = $(target);\n          $target.focus();\n          if ($target.is(\":focus\")) { // Checking if the target was focused\n            return false;\n          } else {\n            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable\n            $target.focus(); // Set focus again\n          };\n        });\n      }\n    }\n  });\n});\n</script>\n\
+<script>\n$(document).ready(function() {\n  var i = 0;\n  var len = $('div[id^=\"photo_block\"]').length;\n\n  function  _scrollNext() {\n    i = ++i % len;\n    var target = \"#photo_block\" + i;\n    $('html,body').animate({scrollTop: $(target).offset().top}, 1000)\n  };\n  function _scrollPrev() {\n    if (!i) i = len;\n    --i;\n    var target = \"#photo_block\" + i;\n    $('html,body').animate({scrollTop: $(target).offset().top}, 1000)\n  };\n\n\n  $('#next').click(function() {\n    _scrollNext();\n    return false;\n  });\n\n  $('#prev').click(function() {\n    _scrollPrev();\n    return false;\n  });\n\n  var rating_hide = 0;\n\n  function _toggleRatings(r_)\n  {\n    $('.flex-item').each(function(){\n      var  item_rating = $(this).attr(\"rating\");\n      if (rating_hide == 1) {\n\t$(this).removeClass(\"faded\").addClass(\"visible\");\n      }\n      else {\n\t  if (item_rating < r_) {\n\t    $(this).removeClass(\"visible\").addClass(\"faded\");\n\t  }\n\t  else {\n\t    $(this).removeClass(\"faded\").addClass(\"visible\");\n\t  }\n      }\n    });\n    \n    if (rating_hide == 1) {\n      $('.ToggleRatings').text(\"Only Show Rated (showing all)\");\n    }\n    else {\n      $('.ToggleRatings').text(\"Show All (showing rated)\");\n    }\n    rating_hide = !rating_hide;\n  }\n  function _showRatingGT(r_)\n  {\n    $('.flex-item').each(function(){\n      var  item_rating = $(this).attr(\"rating\");\n      if (item_rating < r_) {\n\t$(this).removeClass(\"visible\").addClass(\"faded\");\n      }\n      else {\n\t$(this).removeClass(\"faded\").addClass(\"visible\");\n      }\n    });\n    $('.ToggleRatings').text(\"Show All \" + \"(showing >=\" + r_ + \")\");\n    rating_hide = 0;\n  }\n\n  $('body').keydown(function(evnt) \n  {\n    switch (evnt.keyCode) {\n      case 74:\n      case 39:\n\tevnt.preventDefault();\n\t_scrollNext();\n\tbreak;\n\n      case 75:\n      case 37:\n\tevnt.preventDefault();\n\t_scrollPrev();\n\tbreak;\n\n      case 48:  //0\n      case 49:\n      case 50:\n      case 51:\n      case 52:\n      case 53:\n\t_showRatingGT(evnt.keyCode - 48);\n\tbreak;\n\n      case 82:  //r\n       _toggleRatings(1);\n       break;\n    }\n  });\n\n  $('#toggle_ratings').click(function() {\n    _toggleRatings(1);\n  });\n});\n</script>\n\n";
     return js;
 }