Mouse-over settings for portfolio items on the homepage

Shapely
1

Hello,

I am using the portfolio for home widget section to display portfolio items on the home page.

Currently, the portfolio items display each portfolio item’s featured image. When you mouse over, the image receives an opaque fill and the portfolio title and category are displayed.

I want to use CSS to make the portfolio items so that the text and opaque fill are displayed all the time. I also want to change the opacity so that when I mouse over, the title and category are still displayed but the opacity of the fill gets darker.

Can you help with this?

Many thanks in advance and well done again on a great theme and great supported - I have already found loads of solutions from previous posts in the forum.

Sean

2

Hi Sean,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other


#page .shapely_home_portfolio .inner-title.hover-reveal .title {
    opacity: 1;
transform: translate3d(0, -50%, 0);
    -webkit-transform: translate3d(0, -50%, 0);
    -moz-transform: translate3d(0, -50%, 0);
    -webkit-transform: translate3d(0, -50%, 0);
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
     top: 50%;
}

Best Regards,
Movin