Woocommerce Products Hover Effect

[Ait_Mohamed]

Hi support staff;

Making Hover effect for woocommerce Products ( Just Like ETHOS) in Integrity stack, It’s Possible?

&Thank You

[jade]

Hi there,

Yes this is possible but there is no option available out of the box for this so you will have to write some custom CSS to be able to replicate the Ethos shop hover effect to be integrated in Integrity stack. Unfortunately, this goes beyond the scope of our support as this involves some custom coding.

But this should get you started:

.woocommerce li.product .entry-product {
    position: relative;
}

.woocommerce li.product .entry-header .button {
    position: inherit;
    top: auto;
    margin: 10px 0 0 0;
}

.woocommerce li.product .entry-wrap {
    position: absolute;
    top: calc(100% - 2em);
    left: 0;
    right: 0;
    bottom: auto;
    padding: 0;
    font-size: 14px;
    -webkit-transition: all 0.615s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 0.615s cubic-bezier(0.19, 1, 0.22, 1);
    background-color: transparent;
    padding: 0 21px;
}

.woocommerce li.product:hover .entry-wrap {
    top: calc(100% - 7em);
}

.woocommerce li.product .entry-featured {
    overflow: hidden;
    z-index: 0;
}

.woocommerce li.product .entry-wrap:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50em;
    background-color: rgba(255,255,255,0.5);
    z-index: 0;
    -webkit-transition: all 0.615s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 0.615s cubic-bezier(0.19, 1, 0.22, 1);
}

.woocommerce li.product:hover .entry-wrap:before {
    background-color: rgba(255,255,255,0.75);
}

Feel free to edit the code.

Thank you for understanding.