Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #2865492
Featured Slider Hover effect
Closed

Comments

  • tdkevin started the conversation
    September 6, 2021 at 6:52am

    Hi, 

    I want the Feature Slider not show the title form button automatically when I reload the page,  and show for bottom when mouse hover, how Can I modify the CSS Code?  

  •  2,492
    PenciDesign replied
    September 6, 2021 at 8:03am

    Hi,

    Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

    .penci-featured-content {
        opacity: 0;
        transition: 0.3s all ease-in-out;
        transform: translate(0,-130%);
    }
.penci-owl-featured-area:hover .penci-featured-content,
    .penci-image-holder:hover + .penci-featured-content {
        opacity: 1;
        transform: translate(0,-100%);
    }

    Regards,
    PenciDesign.

  • tdkevin replied
    September 6, 2021 at 8:52am

    Many thanks !

  • tdkevin replied
    September 27, 2021 at 3:39am

    Hi, I want to modify something : 

    now I want to show the animate from bottom to top but don't exceed the .penci-owl-featured-area, 

    and the picture has the little zoom in effect,

    just like the effect from this https://xd.adobe.com/view/60dadc16-a1fb-404f-ba0c-cfc6441e972a-3589/?fullscreen 

    how can I modify the code? thanks!

  •  2,492
    PenciDesign replied
    September 27, 2021 at 3:45pm

    Hi,

    Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

    .penci-featured-content {
        transform: translate(0,100px);
        visibility: hidden;
        position: absolute;
        top: auto;
        bottom: 0;
    }
    .penci-owl-featured-area:hover .penci-featured-content,
    .penci-image-holder:hover + .penci-featured-content {
        transform: translate(0,0);
        visibility: visible;
    }

    Regards,
    PenciDesign.