From 361693d2c7a0164fca06a1cecf68d123b64a9b58 Mon Sep 17 00:00:00 2001 From: Laury GvR Date: Thu, 7 Jul 2016 13:04:29 -0400 Subject: [PATCH] Slideshow css transition on title and description --- js/custom/pageSetup.js | 18 ++++++++++------- scss/_slideshow.scss | 44 +++++++++++++++++++++++++++++++++++++----- 2 files changed, 50 insertions(+), 12 deletions(-) diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js index 1468e03..18081d0 100644 --- a/js/custom/pageSetup.js +++ b/js/custom/pageSetup.js @@ -22,18 +22,22 @@ $(document).ready(function () { //console.log('menu-id = ' + menuNum); }); - $(".slideshow_slide_slideshow_slide_image").each( function () { +// $(".slideshow_slide_slideshow_slide_image").each( function () { // console.debug($(this).children('img').attr('src')); - }); +// }); // this are the functions for the animations, removing the class seems to remove it at the wrong time - $(".slideshow_container").on("slideshowAnimationStart", function () { -// $(this).find(".slideshow_currentView").find(".slideshow_description").addClass('open'); - }); + +// $(".slideshow_container").on("slideshowAnimationStart", function () { +// $(".slideshow_currentView").removeClass('slideshow_open'); +// $(".slideshow_nextView").addClass('slideshow_open'); +// +// }); - $(".slideshow_container").on("slideshowAnimationEnd", function () { +// $(".slideshow_container").on("slideshowAnimationEnd", function () { + // $(this).find(".slideshow_currentView").find(".slideshow_description").removeClass('open'); - }); +// }); }); diff --git a/scss/_slideshow.scss b/scss/_slideshow.scss index fa734f2..af51bb2 100644 --- a/scss/_slideshow.scss +++ b/scss/_slideshow.scss @@ -23,11 +23,45 @@ list-style: none; } } -.slideshow_container_style-light .slideshow_description_box div.slideshow_title{ - float: right; - padding-right: 100px; +#slideshow .slideshow_description_box div.slideshow_title{ + position: absolute; + right: 100px; + bottom: 0; + + padding: 10px 20px; + background-color: rgba(0,0,0,0.8); } -.slideshow_container_style-light .slideshow_description_box div.slideshow_description{ - display: none; +#slideshow .slideshow_description_box div.slideshow_description { + background-color: rgba(48,47,107,0.8); + padding: 15px 40px; + position: absolute; + left: -50%; + top: 50%; } +#slideshow .slideshow_description_box { + top: 0; + bottom: 0; +} +#slideshow .slideshow_slide { + position: relative; +} +#slideshow .slideshow_view.slideshow_currentView .slideshow_description_box div.slideshow_description { + left: 200px; + transition: 0.8s all ease-in-out; + border-radius: 24px; +} +#slideshow .slideshow_container_style-light .slideshow_description_box { + background: none; +} +#slideshow .slideshow_container_style-light .slideshow_transparent:hover, +#slideshow .slideshow_container_style-light .slideshow_transparent { + opacity: 1; +} +#slideshow .slideshow_container_style-light .slideshow_description_box div.slideshow_title { + font-size: 14px; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + +} + \ No newline at end of file -- 2.17.1