Jump to content

Change Image Opacity 

Go to solution Solved by Wolfsilon,

Recommended Posts

  • Solution

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

Link to comment
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 

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.