Ethos Hover Edit

Support
#1

Hey. I would like to change my portfolio hover on the ethos stack.

I would like the grey bars and text to not be there until you over over the item

I would also like the bars to fill 100% of the box with the text centered. Similar to how it appears with different stacks.

My website is zachellercreative.com

Thank you in advance for the help.

#2

Hi there,

Please try this code to the Global CSS:

.home.page .x-portfolio .entry-cover .h-entry-cover {
    opacity: 0;
    top: -55px;
}

.home.page .x-portfolio .entry-cover:hover .h-entry-cover {
    opacity: 1;
    top: 0;
    height: 100%;
}

.home.page .x-portfolio .entry-cover:hover .h-entry-cover span {
    top: 50%;
}

Here are some reference links related to the suggestions above:

Hope this helps.

#3

Thank you so much. That worked great. Only issue now is it seems to be snapping back to the hold style as I drag the mouse off the item. You can see it here… www.zachellercreative.com

I hope this helps

#4

Hey There,

The height should be change first not upon hovering the item. To resolve this, simply update the css code and use this instead:

.home.page .x-portfolio .entry-cover .h-entry-cover {
    opacity: 0;
    top: -55px;
    height: 100%;
}

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

.home.page .x-portfolio .entry-cover:hover .h-entry-cover span {
    top: 50%;
}

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

#5

This worked perfectly but is there a way to make the text just fade out with the rest instead of sliding back up when I hover off? Thank you.

Lastly, what is a snippet of code I can use to only apply this on the “desktop version” I would like the labels to reappear on mobile so you can see them without clicking on them.

I love this look on desktop though.

#6

and is there a way to make the thumbnail photos slightly zoom in within that container?

#7

Hi @ZachEller,

Please replace the CSS provided by @RueNel, with this

@media ( min-width: 980px ) {
.home.page .x-portfolio .entry-cover:hover .h-entry-cover {
    opacity: 1;
    top: 0;
    padding-top: 40%;
}

.home.page .x-portfolio .entry-cover .h-entry-cover {
    opacity: 0;
    top: 0;
    height: 100%;
    padding-top: 40%;
}
}

That should make the text just fade out while restricting it to the desktop view.

Hope that helps.

#8

Thank you so much!!! This worked perfectly

#9

You’re welcome!
We’re glad we were able to help you out.

#10

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