Hover w/ Icon for Blog Images/Latest Posts

Support
#1

I’d like to make my “latest posts” to have a hover action with icon, like what this user has on their site: https://www.azuremedical.com.au/coolsculpting/

The “Azure Medical News” section is a little over half way down the page. How do I obtain this hover look/feature?

#2

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. 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.

Thank you.

#3

Thanks! My URL is https://intotheharvest.org/

#4

Hi there,

Please add this code in the custom CSS:

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

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

Hope this helps.

#5

Thanks Jade, that definitely helped!

How can I create the raised/shadow look for these recent posts?

And is there a way to change the color of the opaque hover screen?

#6

Hi there,

Would you mind clarifying what you mean by “raised/shadow look”?

As for changing the opaque hover screen color. You can use this selector .x-recent-posts .x-recent-posts-img:after and set the background color using an RGBA color value so that you can have a transparency to the color.

Hope this helps.

#7

Thanks for the info on adding RGBA color value. That worked great.

In terms of clarifying the “raised/shadow look” the best I can do is refer to the site example I posted above at https://www.azuremedical.com.au/coolsculpting/

The recent posts section (titled “Azure Medical News”) is a little over half way down the page and shows the look I am trying to recreate with the box shadow feature. How do I get this shadow look?

#8

Hi,

You can add this in custom css

.x-recent-posts a {
    box-shadow: 0 5px 10px 0 rgba(191, 194, 210, 0.5);
}

For future reference you can generate shadow code from the link below.

http://www.cssmatic.com/box-shadow

Hope that helps.

#9

Perfect. Thanks so much Paul. And thanks for the link to the site you provided.

#10

Glad we could help.

Cheers!