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

[HDTV-Entertainment]

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

[Bill Robbins]

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

[HDTV-Entertainment]

Works like a charm. thanks

[Author]

Posts