Portfolio Margins, Labels, and Hover

[ZachEller]

I’m currently using the Ethos stack for my design portfolio.
My URL is: http://www.zachellercreative.com

1. How can I remove the portfolio labels, and have them reappear in this parallax sliding motion when I hover over the square? This person did it on this swimming pool website: http://agape-pools.com/pools/

2. How can I change the spacing in-between the portfolio items?

I searched throughout the threads but couldn’t find a solution that worked for me.
Thank you so much for the help in advance.

[nico]

Hi @ZachEller,

Thanks for writing in.

1. This kind of customization is beyond the scope of our support however you could check the plugin essential grid to create something like that. Note: essential grid is one of the extended plugins of X theme.

#1 Grid Gallery Building Solution - Essential Grid WordPress Plugin

2. You could use the code below to be added in your Custom CSS so that you could adjust the spacing between your portfolio items:

     .x-iso-container.cols-3>.hentry {
          width: 35.28%;
      }
   

Hope it helps.

Let us know how it goes.

Thanks.

[ZachEller]

What if I just want to simply make the labels disappear, but have them reappear when hover over the item?
Or the opposite, make the label disappear when I hover over?

I’ve found multiple short codes for hover color, as well as taking away the label. It would seem this shouldn’t be too hard to do.

[ruenel]

Hello There,

To hide and display the labels upon hover, you can make use of this code:

.page .x-portfolio .entry-cover .h-entry-cover {
    opacity: 0;
    transition: opacity 1s Ease;
}

.page .x-portfolio .entry-cover:hover .h-entry-cover {
    opacity: 1;
}

We would loved to know if this has work for you. Thank you.

[ZachEller]

Thank you! That worked perfectly! Is it possible to overlay the whole image and not just the bottom bar?

And is it possible to do a black and white overlay that shifts to color when I roll over?

[Prasant]

Hello @ZachEller,

Thanks for updating the thread.

Yes, you can add following CSS under X > Theme Options > CSS:

.page-template-template-layout-portfolio .entry-thumb:hover {
	background-color: #000;	
	opacity: .3;
}

Thanks.