Portfolio Tiles - Reverse Mouse-over effect

Shapely
#1

Hi there,

Love the shapely theme,

Been scouring shapely/jetpack php files for the sections that control the mouse over effects (masonry??) in any case - I can’t find it.

I’m trying to reverse the effect of the mouse-over. I would like the Portfolio widget to displayed grey-ghosted titles with the white text and then when you mouse over this is removed and you see the original Featured Image.

I apologize if this has been asked previously - I could not find it through search.

thank you!

#2

Hi @tylersavage,

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 .inner-title.hover-reveal:hover .title {
    opacity: 0;
        transform: translate3d(0, 50px, 0);
    -webkit-transform: translate3d(0, 50px, 0);
    -moz-transform: translate3d(0, 50px, 0);

}

#page .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%;
}
#page .inner-title {
     opacity: 1;
}
#page .inner-title:hover {
    opacity: .95;
}

Best Regards,
Movin