Docs

[tats86]

Hello,

I’m trying to change the hover over recent blog posts (and on blog page) from the hover color with icon to an image of my own. Can this be achieved?

My website is aimetamarque.com

Thank you

[Rupok]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img::before {
  content: url("//yourimagehere.png");
}

Replace //yourimagehere.png with your uploaded icon image path. Make sure to use a small image.

Cheers!

[tats86]

Thanks for the quick reply. I’m afraid it’s not doing it. What size should the image be?

[Christian]

Please replace the code given previously with

.x-recent-posts a:hover .x-recent-posts-img {
    background: url(yourimage.png);
    background-size: cover;
}

Just in case you need to remove the yellow overlay, please add

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

Thanks.

[tats86]

Thank you.

1. I was able to remove the hover over color, but the image is still not working. I can still see the icon.

2. Also, there seems to be a tilt when hovering over, and it masks part of the image. Is there a way to remove that as well?

3. I would also like these changes to be applied not only to my homepage, but to the blog page.

Thanks for your help. I hope I’m explaining my problems correctly.

[Joao]

Hi There,

1- To Remove the Icon please add the following code :

.x-recent-posts .x-recent-posts-img:before {
    content: none !important;
}

The image does work, I have tested on my end.

2- I Could not replicate this issue on my end, please provide us your URL in order that we can have a look at the issue.

3- Add .home in front of every code used for this purpose.

Hope that helps,

Joao

[tats86]

Hi Joao,

I applied the previous suggestion but nothing changed.

1. Still not seeing the linked image on hover, I only see the image tilt slightly
2. The blog page has not reacted to any of these.

My URL is http://aimetamarque.com/

[Joao]

Hi There,

Yes that is definitively tilting.

In order that we can have a look on the issue would you mind providing your WP Admin Credentials so we can take a closer look.

Make sure to mark the reply as private.

Thanks

Joao

[tats86]

This reply has been marked as private.

[Joao]

Hi There

I have updated this:

.x-recent-posts a:hover .x-recent-posts-img {
    background: url(yourimage.png);
    background-size: cover;
}

to this:

.home .x-recent-posts a:hover .x-recent-posts-img {
    background-image : url(http://aimetamarque.com/wp-content/uploads/sites/2/2016/06/Aime-ta-marque-branding-personnel-png-500x500-e1467062378288.png) !important;
    background-size: cover;
}

And now it works fine.

You just need to put the complete URL of the image you would like to use instead.

Hope that helps

Joao

[tats86]

Awesome, it works now, thanks!

Now, can the same change be applied to the blog page? It only works on my homepage on the “recent posts section”. I’d like it to work there as well http://aimetamarque.com/blogue/

[Paul R]

Hi,

In that case, please change the code to this.

.blog .entry-featured a,
.home .x-recent-posts a:hover .x-recent-posts-img {
    background-image : url(http://aimetamarque.com/wp-content/uploads/sites/2/2016/06/Aime-ta-marque-branding-personnel-png-500x500-e1467062378288.png) !important;
    background-size: cover;
}

.blog .entry-featured a:hover img {
    opacity:0;
}

Hope that helps.

[tats86]

Great! one last little thing though : remove the icon when hover over.

[Jade]

Hi there,

Please use this code:

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

Hope this helps.

[tats86]

Awesome, thanks for all your help!

[Author]

Posts