Skip to content
Public Ticket #17945

Featured Slider Hover effect

Conversation thread

PenciDesign Supporter replied

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

Customer Reply

Many thanks !

PenciDesign Supporter replied

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

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.