Change Image Opacity 

Site URL: https://www.moderndifferent.com/

How can I add an opacity hover effect for all image blocks?

Thanks.

19 minutes ago, Wolfsilon said:

Hello,

To achieve this effect we'll need to add a bit of Custom CSS to your website. If you have multiple pages with the same image layout and image blocks, the effect will apply to all blocks. However, if you only want to apply to hover effect to an individual page/section you'll need to target each page/section and add the code below.

I've added several other properties that can be used to help your hover effect stand out. Just remove the "/*" & "*/" to try them out! There are a lot of hover properties and combinations you can use to create your own custom effect. You can Google the different transform properties and values, filters, and easing methods. 

To apply a site-wide hover effect use the following code:

.design-layout-stack img {
transition: all .5s ease;
/* border: 2px solid hotpink; */
}

.design-layout-stack:hover img {
opacity: .5s;
/* filter: grayscale(100%); */
/* transform: scale(1.05); */
/* border: 2px solid hotpink; */
}

For the page you shared specifically use the following code:

#collection-607e58d7db63ee562a23b8e5 {
.design-layout-stack img {
transition: all .5s ease;
/* border: 2px solid hotpink; */
}

.design-layout-stack:hover img {
opacity: .5s;
/* filter: grayscale(100%); */
/* transform: scale(1.05); */
/* border: 2px solid hotpink; */
}
}

Hope this helps!

-Dan

Hey Dan. Thank you so much! You are super awesome. Perfect. It works. Now I can't decide what I need. 🙂 Too many options. Cheers, Juris 

@kristobans Do you want solve these?

Site URL – https://www.moderndifferent.com/

1. (Mobile-Homepage) Reduce submit button width?

2. (Tablet-Homepage) Make newsletter text 2 lines, same as desktop?

10 minutes ago, tuanphan said:

@kristobans Do you want solve these?

Site URL – https://www.moderndifferent.com/

1. (Mobile-Homepage) Reduce submit button width?

2. (Tablet-Homepage) Make newsletter text 2 lines, same as desktop?

Hi. Yes please for both. Thank you so much. 

21 hours ago, kristobans said:

Hi. Yes please for both. Thank you so much. 

Add to Design > Custom CSS

/* Mobile newsletter */
@media screen and (max-width:640px) {
div#footerBlocksBottom .newsletter-form-fields-wrapper {
    flex: 1 0 60% !important;
    width: 60% !important;
    min-width: unset !important;
}
div#footerBlocksBottom .newsletter-form-fields-wrapper>div {
    min-width: unset;
}
}
/* tablet newsletter */
@media screen and (max-width:900px) and (min-width:641px) {
div#block-yui_3_17_2_1_1620309923611_319731 + .row .span-5 {
    width: 70% !important;
}
}

2 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Mobile newsletter */
@media screen and (max-width:640px) {
div#footerBlocksBottom .newsletter-form-fields-wrapper {
    flex: 1 0 60% !important;
    width: 60% !important;
    min-width: unset !important;
}
div#footerBlocksBottom .newsletter-form-fields-wrapper>div {
    min-width: unset;
}
}
/* tablet newsletter */
@media screen and (max-width:900px) and (min-width:641px) {
div#block-yui_3_17_2_1_1620309923611_319731 + .row .span-5 {
    width: 70% !important;
}
}

 

Thank you. Awesome. Looks much better now.