Making transition for class .rsGCaption

wilhelm.kleinoeder's Avatar

wilhelm.kleinoeder

10 Jun, 2019 09:11 PM

Hi Dimitry,

I created a post slider with a short transition which is working fine. But the caption shows up always immediately at change. This does not harmonize with the smooth transition of the pictures. I tried css styling with:

.rsGCaption h2 {
    padding-bottom: 5px !important;
    color: #f4f4f4 !important;
    /* transitions */
    -webkit-transition: all 2s ease;
       -moz-transition: all 2s ease;
        -ms-transition: all 2s ease;
         -o-transition: all 2s ease;
            transition: all 2s ease;
}

But there is no effect. In your documentation then I found "Content of caption changes before animation of slides start". Is there really no way to have a transition for the caption?

Wilhelm

  1. Support Staff 1 Posted by Dmitry Semenov on 11 Jun, 2019 03:54 AM

    Dmitry Semenov's Avatar

    Hello,

    The global caption is single for the whole slider. You can not animate it, but you can place the caption directly into the content of the slide, to do this click on "Edit Slide Markup" in general options and after {{image_tag}} add:

    <div class="custom-rs-caption">
      {{title}}
    </div>
    

    Then you may apply styles to it via CSS, for example:

    .custom-rs-caption {
      position: absolute;
      bottom: 5px;
      left: 5px;
      padding: 4px 6px;
      background: rgba(0,0,0,0.7);
      color: #fff;
    }
    

    If you want to apply one more transition to it, you may use the active/current class:

    • In Misc section of the slider options enable "Current CSS class",
    • Then in CSS you may use:
    /* animate opacity from 0 to 1 when slide becomes active */
    .custom-rs-caption {
      opacity: 0;
      transition: opacity 0.8s ease; 
    }
    .rsActiveSlide .custom-rs-caption {
      opacity: 1;
    }
    
  2. 2 Posted by wilhelm.kleinoe... on 12 Jun, 2019 06:28 PM

    wilhelm.kleinoeder's Avatar

    Thank you Dimitry.

    This helped to solve my problem.

    Wilhelm

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac