X-Theme Post Caousel Images Dark

[jdehaan001]

I’ve scoured the forums and experimented a lot with the css, but cannot figure out how to resolve my two issues.

My images in the Post Carousel are dark, even before hovering over them. How do I resolve this?

Secondly, while hovering on an image, I know how to prevent some of the meta data from displaying and how to display my own message, but I’d like to know how to display the Post Title, while hovering on the image. I don’t want the title to disappear when I hover on the image.

https://yourhomewaterfilters.com

Thank you!

[ruenel]

Hello John,

Thanks for writing in!

1.) The image is dark because most of your image is opaque and that the background color of the carousel is dark. We need to change it to white. To do that, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-post-carousel .entry-cover {
    background-color: #fff;
}

2.) So that the title will not disappear and remain in place once you hover over the carousel item, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

body .x-post-carousel.unstyled .entry-cover:hover .h-entry-cover {
    top: calc(100% - 4em) !important;
}

We would loved to know if this has work for you. Thank you.

[jdehaan001]

Hi’ya Rue,

Your fix worked really slick, thank you! The title stayed put, just like I wanted and my new text slid into position. Because the text was white on a white background, I added some text-shadow to allow it to be seen. It looks pretty neat, check it out: https://yourhomewaterfilters.com/

Here’s the code I used:

/* Prevents Metadata from being displayed during hover on Post Carousel. Applied globally. */
.x-post-carousel-meta span {display: none;}

/* Applies custom text to Post Carousel during hover state. Applied globally. */
.x-post-carousel-meta::before {content: “Read Post”; color: #fff; text-shadow: -4px 4px 3px #999, 1px -1px 2px #000; font-size: 30px;}

/* Fix background color of Post Carousel, non-hover state. Applied globally. /
.x-post-carousel .entry-cover {
background-color: #fff;
}
/ Prevent Post Carasousel title from disappearing during hover. Applied globally. */
body .x-post-carousel.unstyled .entry-cover:hover .h-entry-cover {
top: calc(100% - 4em) !important;
}

/* Remove featured image from posts, applied globally. Still allows featured image to display in carousel and blog page. */
.wp-post-image {
display: none;
}

Thanks again! Happy Holidays to you! -John

[ruenel]

You’re most welcome!
We’re glad we were able to help you out.

Happy Holidays!