Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Change Image Opacity 


Question

6 answers to this question

Recommended Posts

  • 1

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
  • 0
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
  • 0

@kristobans Do you want solve these?

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

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

moderndifferent.com-01-min.png

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

moderndifferent.com-02-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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