Portfolio Reverse Hover Effect

Support
#1

Hello, this is a strange request but clients want strange things :slight_smile:

I would like to reverse the hover effect on the portfolio items, meaning they start out with the overlay and the title and when the user hovers it goes away and reveals the image. Is this easy to do via css?

I am using the renew stack.

1 Like
#2

Hi,

To achieve that, you can add this in X > Launch > Options > CSS

.x-portfolio .entry-featured .entry-cover {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
         transform: translate(0, 0);
}

.x-portfolio .entry-featured:hover .entry-cover {
    -webkit-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
	transform: translate(-100%, 0);
}

Hope that helps.