Matching On-Hover States Between News & Portfolio Shortcodes

Support
#1

Hey there,

So there’s an on-hover state on the standard news page with the dimming and link icon.

I want that exact thing for the portfolio shortcodes that appear on our homepage. Any idea on how to accomplish this?

#2

Hi There,

Thank you for writing in, but sorry I am not entirely certain of what you’re trying to do, you mean the grid on the News section of that page below, right?

If so, please change/edit that grid and choose the skin template that is closer to the hover effect that you like, see the documentation below.

Essential Grid - Skin Template

You can also edit the skin that you choose if needed.

Essential Grid - Item Skin Editor

Hope that helps,
Cheers!

#3

Hey there.

I’m looking to match the styling of the portfolio page to the shortcodes on our homepage that display like this.

#4

Hello @Xyxzor,

Thanks for asking. :slight_smile:

You can add following CSS under X > Theme Options > CSS:

.x-recent-posts .format-standard .x-recent-posts-img:before{ content: "\f0c1";}

I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

#5

Is that code right, I’m not noticing any difference?

#6

Hi There,

I think we are looking on different site, please provide us the site URL so we can take a closer look. If its under construction mode please provide us login credentials in a secure note.

Cheers!

#7

Note added.

#8

Hello @Xyxzor,

Thanks for asking. :slight_smile:

Please add following CSS under X > Theme Options > CSS:

.entry-thumb {
   background-color: #e03430;
}

Thanks.

#9

I meant flipped the other way.

#10

Hi again,

Please use the following code instead:

.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img:after {
    opacity: 0.6;
    background: #000;
}
.x-recent-posts .x-recent-posts-img:after {
    background: #000;
}

Let us know how this goes!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.