Customize Overlay in Ethos Post Slider

Support
#1

Hi,

I’m trying to customize the overlay in the Ethos Post Slider that appears as a layer above the featered image. I’d like to make it so that the overlay that displays the title and view post button only appears when hovering over the slide and I’d also like to be able to move the position of the post title and view post button on the overlay to the bottom of the slide rather than having it centered. Is this possible?

#2

Hello @JonFrancisThompson,

Thanks for asking. :slight_smile:

You can add following CSS under X > Theme Options > CSS to make the necessary changes:

.x-post-slider-entry>a>.cover>.middle {display: none !important;}

.x-post-slider-entry>a:hover>.cover>.middle{display: table-cell !important;vertical-align: bottom !important;padding-bottom: 20px !important;}

If you would like to learn CSS, please take a look at following resource.

https://www.w3schools.com/css/

Thanks.

#3

Great, thanks for your response. I’m going to try this now. Also, in a related question, the featured images aren’t displaying in the post slider properly either. It seems that they are being clipped off with only a portion of the image showing. I have tried changing the size of the image but I still get the same sized image no matter what. How can I make sure that the full image will appear in the post slider?

I hope you don’t mind answering this question as well, but if I need to start a new thread for this one, please just let me know. Thanks for your help, and I hope you’ll stay tuned into this post as I’m going to try your solution now and will let you know how it goes.

#4

Great, thanks for your response. I’m going to try this now. Also, in a related question, the featured images aren’t displaying in the post slider properly either. It seems that they are being clipped off with only a portion of the image showing. I have tried changing the size of the image but I still get the same sized image no matter what. How can I make sure that the full image will appear in the post slider?
I hope you don’t mind answering this question as well, but if I need to start a new thread for this one, please just let me know. Thanks for your help, and I hope you’ll stay tuned into this post as I’m going to try your solution now and will let you know how it goes.

#5

Also, how can I get rid of the date and the category in the overlay (“cover”) in the post slider so that it just shows the title and view post button?

#6

Ok, sorry to give you so many separate replies to look through, but I just put the code you suggested in and it seems to work for the most part. Thanks again! But, one thing that is still an issue, besides those mentioned in my other replies, is that the picture in the slider is by default showing the arrows on the sides of the slide and the slide has a dark layer over it. is it possible to make the arrows and that dark overlay layer also only show when hovering? thanks in advance, and I really appreciate all your help.

#7

Hello @JonFrancisThompson,

Thanks for updating the thread. :slight_smile:

Please try out following CSS under X > Theme Options > CSS:

.x-post-slider-entry>a {
    background-color: transparent !important;
}

.x-post-slider-entry .featured-meta {
    display: none;
}

.flex-direction-nav a{display: none !important;}

Let us know how it goes.

Thanks.

#8

Thanks. I tried this and it does get rid of the dark overlay, but it does not show back up on hover. I would like the arrows on the sides of the image and the dark overlay to show back up when hovering over the image.

Also, I still cannot see the full size image in the slider. What should the dimensions be for featured images if I would like the whole image to show up without being clipped? Let me know, I think we’ve almost got this solved. Appreciate you!

#9

Ok, I added this bit to get the background and arrows on hover:

.x-post-slider-entry>a:hover {
background-color: rgba(0,0,0,0.8) !important;
}

.flex-direction-nav>a:hover{
display: table-cell !important;
}

That all seems to be working great. But I still can’t get the image to size correctly? Any idea what dimensions the image should be? I’ll try resizing while I wait for your response to see if it will work, but as of now I’m still getting some clipping.

#10

Hi,

I need to check your site but it is currently on maintenance mode.

Can you provide us your wordpress admin login in Secure Note(key icon) so we can take a closer look.

Thanks

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.