Entry-thumb opacity

[fullabeatz]

Hi, I’ve been playing around with the .entry-thumb and have a question. How can I change the opacity that an image fades to on hover?

The page I’m looking at is:

Family Travel Tips Archives | Dotting the Map

Thanks!

[Joao]

Hi There,

Please add the following code to Theme Options CSS and adjust according to your wishes.

a.entry-thumb:hover img {
    opacity: 0.45;
}

Hope it helps

[fullabeatz]

That worked perfectly.

How would I change the background color and the opacity for the featured posts on this page?

Travel

Thanks.

[friech]

Hi There,

Please add this to Theme Options > CSS

/*change the recent posts element background-color*/
.page-id-2345 .x-recent-posts a.with-image:hover .x-recent-posts-img:after {
	background-color: blue;
}

Keep in mind that this code only works on the http://dottingthemap.com/travel/ page. Remove the .page-id-2345 on the code if you want this to apply on all pages.

Thanks,

[fullabeatz]

Thanks! This works to change the background color. What about the opacity of of the image fade?

Also when you roll off of this slowy, it flashes another color. Any ideas there?

[christopher]

Hi there,

The flash effect you see is the side effect of a code you added:

.entry-thumb:before, .x-pagination span.current, .flex-direction-nav a, .flex-control-nav a:hover, .flex-control-nav a.flex-active, .mejs-time-current, .x-dropcap, .x-skill-bar .bar, .x-pricing-column.featured h2, .h-comments-title small, .x-entry-share .x-share:hover, .x-highlight, .x-recent-posts .x-recent-posts-img:after {
    background-color: #ff846b;
}

The background color of #ff846b gets the flash effect.

To remove that effect on the specific page you are talking about and add an opacity to background kindly add the code below:

.page-id-2345 .x-recent-posts a.with-image:hover .x-recent-posts-img:after {
    background-color: #000;
    opacity: 0.6;
}

.page-id-2345  .entry-thumb:before, .page-id-2345  .x-pagination span.current, .page-id-2345  .flex-direction-nav a, .page-id-2345  .flex-control-nav a:hover, .page-id-2345  .flex-control-nav a.flex-active, .page-id-2345  .mejs-time-current, .page-id-2345  .x-dropcap, .page-id-2345  .x-skill-bar .bar, .page-id-2345 .x-pricing-column.featured h2, .page-id-2345 .h-comments-title small, .page-id-2345 .x-entry-share .x-share:hover, .page-id-2345 .x-highlight, .page-id-2345 .x-recent-posts .x-recent-posts-img:after {
	background-color: #000;
}

Please kindly consider that all these help you get here in this thread is part of a customization of a feature which is not already built in our theme and is outside the scope of the support. My colleagues and I did try to go the extra mile to be able to be helpful as much as possible.

You will surely understand that this can not go forever and in some place, you will need to rely on your self for the customization or hire a developer.

I suggest that you get started with the CSS and the selectors here:

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

Thank you for your understanding.