Docs

[eveall]

I would like to match hovers over images, blog posts, recents, etc. I also would like to do the same for the recent shortcode I would like to remove the icons from the middle of the hover over too.

I was using the following code for the images.

a:hover img {
  opacity: 0.5;
}
  }

I looked up through the forum to try to change the other ones to match this one, but nothing seems to match. This is the code i was using for the others:

.x-recent-posts .x-recent-posts-img:before {
      display:none;
}

.x-recent-posts a:hover img {
    opacity: .5;
  content: none;
}

.x-recent-posts .x-recent-posts-img {
    background-color:transparent;
}

a.entry-thumb:hover:before {
  opacity: 0;
  content: none;
}

a.entry-thumb:hover {
    background-color: #ffffff;
      opacity: 0.5;
}

[Rue Nel]

Hello There,

To assist you better with this issue, would you mind providing us the url of your site with login credentials, if necessary, so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password (only if necessary)

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[eveall]

This reply has been marked as private.

[eveall]

1. Alright, so perhaps for simplicity, let’s just make the img hover dark instead. When i use this code

a:hover img {
  opacity: 0.5;
}

it goes white. How can i match it so it goes dark over instead?

2. How can i remove the image in hover for the other parts? Plog posts in recents shortcorde and the blot posts on the latest posts page. I changed the icon to an eye in one of them but would prefer to remove it all together.

[Rue Nel]

Hello There,

Thanks for the updates!

1] To make the img hover dark instead, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

img ~ a,
a.x-img,
a img,
a[title*="Shop"],
a[title^="Shop"] {
  display: block;
  background-color: #000;
}

a:hover img {
  opacity: 0.3;
}

2] To totally remove the icon, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

a.entry-thumb:hover:before {
  display: none;
}

Hope this helps.

[eveall]

Thanks for helping out!

1. What does the “Shop” code do in the above? It seems to work for those specific icons, but not for others. Maybe i can replicate it for other links that are in the website as it doesn’t seem to work for them (see footer on website).

2. That works except for the recent post short code. That still shows an icon on it. See recent posts on homepage (also in sidebar on blog).

3. This kind of combines 1+2…is there a way to reduce the fade somewhat? The built in is very dark and doesn’t match the 0.3 opacity for the images in 1.

Thanks again!

Steve

[Rue Nel]

Hello Steve,

Thanks for the updates!

1] To have a better understanding of the css selectors, please check this out: http://www.w3schools.com/cssref/css_selectors.asp

2] To include the recent post, please update the given code and use this instead:

.x-recent-posts .x-recent-posts-img:before ,
a.entry-thumb:hover:before {
  display: none;
}

3] To reduce the opacity for both elements, please update the previous code and use this:

a:hover img,
.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img:after {
  opacity: 0.3;
}

Hope this helps.

[eveall]

Thanks for your help!

Almost there….Still not including the “latest posts” page for the hover. The icon is gone but it goes way too dark on hover. How can I change that one?

Thanks in advance,

Steve

[Rupok]

Hi Steve,

You can try changing the opacity value for the above code be cause this is controlled by the opacity. If you still see difference, kindly attach a screenshot and point us the issue.

Thanks!

[eveall]

This reply has been marked as private.

[Rue Nel]

Hey Steve,

Please update the code with opacity. You may use this code:

a img,
a.entry-thumb img,
.x-recent-posts a .has-post-thumbnail .x-recent-posts-img:after {
  transition: opacity 0.75s ease;
}

a:hover img,
a.entry-thumb:hover img,
.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img:after {
  opacity: 0.3;
}

I modified the code and added some transition to make it uniform. We would loved to know if this has work for you.

Thank you.

[eveall]

Hi, thanks for your reply. I tried the code and while it looks better i still have links in the recent posts page (blog) go dark, and all other links go white? There are still all different levels of opacity and overlay color. Look at the links on the homepage, they’re not consistent either. I just want consistency. Any ideas?

Thanks,

Steve

[Paul R]

Hi Steve,

You can add this under Custom > Edit Global CSS in the Customizer.

body .entry-thumb {
   background-color:#fff;
}

Hope that helps.

[eveall]

That did the trick. Thanks. I’ll see if i can fiddle with the transparency of them all to get them to match. Thanks.

[Nabeel A]

Glad we could help.

Cheers!

[Author]

Posts