Featured Slider Hover effect

Public Ticket #17945

Conversation thread

PenciDesign Supporter replied

5 years ago

Staff Reply

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.

tdkevin replied

5 years ago

Customer Reply

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!

tdkevin replied

5 years ago

Customer Reply

Many thanks !

PenciDesign Supporter replied

5 years ago

Staff Reply

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 started the conversation

5 years ago

Conversation Start

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?

Want to join this conversation or access attachments? Sign in first.