Hero arrows in middle rather than at bottom and show only on hover?

Support Area Forums Finesse Hero arrows in middle rather than at bottom and show only on hover?

This topic contains 2 replies, has 2 voices, and was last updated by  HDTV-Entertainment 3 years, 3 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
URL to the page in question: http://greatestates.wpengine.com/
  • Author
    Posts
  • #37018

    HDTV-Entertainment
    Participant

    Right now the hero arrows are at the bottom of the photo slides. Is there a way to get them to be half way up in the middle rather at the bottom. And, can they be made to disappear and show only on hover on photo?

    I see this a lot on slide shows and I think it is more elegant.

    Thanks,
    Rick

    #37023

    Bill Robbins
    Moderator

    Hi Rick,

    You can do something like that. Add this to the Custom CSS in the advanced section of the customizer:

    
    .owl-prev,
    .owl-next {
    	bottom: 50vh;
    	opacity: 0;
    	transition: all 0.2s ease-in-out;
    	-moz-transition: all 0.2s ease-in-out;
    	-webkit-transition: all 0.2s ease-in-out;
    }
    
    #hero-section:hover .owl-prev,
    #hero-section:hover .owl-next {
    	opacity: 1;
    	transition: all 0.2s ease-in-out;
    	-moz-transition: all 0.2s ease-in-out;
    	-webkit-transition: all 0.2s ease-in-out;
    }
    

    Take care,
    Bill

    #37027

    HDTV-Entertainment
    Participant

    Works like a charm. thanks

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Hero arrows in middle rather than at bottom and show only on hover?’ is closed to new replies.