How do I remove dark overlay on slideshow in Prestige Theme

New Member
1 0 0

Hi there,

The images I upload to the slideshow section have an opacity that darkens as  the pictures zoom resolves, I would really like to remove this as it makes darkens the pictures a little too much, is there any way of doing this?

Thanks!

Zelda

0 Likes
New Member
2 0 0

For me, I modified the  .Image--contrast::after css class in the theme.scss.liquid file.

 

See the background-image: linear gradient css element on line 3353 (your css line may be different - just search for the class above)

 

Changed mine to the following:

 

.Image--contrast::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
left: 0;
top: 0;
background-image: linear-gradient(to top, rgba(#040404, 0.0), rgba(#363636, 0.5));
}

 

Also added text-shadow with radial black blur to the headings to ensure they stood out, like follows: 

 

@media #{$phone} {
  .Slideshow__Content h3,
  .Slideshow__Content h2 {
    display: none;
    //text-shadow: 0px 0px 6px #000;
  }
  .ButtonGroup {
  margin: 10px 5px !Important;
  }
}
 
.Slideshow__Content h3,
.Slideshow__Content h2 {
  text-shadow: 1px 1px 3px #000;
}
0 Likes
New Member
3 0 0

Hi !

Im trying to do the same and remove the dark overlay.

I cannot find the text that I am supossed to replace with the code you mention on your post!

Please can you help me?!

 

THANKS A LOT IN ADVANCE FOR YOUR PATIENCE AND TIME!!

0 Likes
New Member
2 0 0

ADMPeriferica,

 

1. Are you looking at the theme.scss.liquid file?

2. did you search for the class .Image--contrast::after (be carful of double dash and double :: - just cut and paste mine)

3. the whole section is below, you could search for "Image overlay" - it's got a comment at start of section

 

/**
* ----------------------------------------------------------------------------
* Image overlay
* ----------------------------------------------------------------------------
*/

.Image--contrast {
position: relative;
}

.Image--contrast::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
left: 0;
top: 0;
background-image: linear-gradient(to top, rgba(#040404, 0.0), rgba(#363636, 0.5));
}

.Image--contrast > * {
z-index: 1;
}

0 Likes
New Member
3 0 0

Thank you so much for your quick response!!! it worked perfectly!!

0 Likes
New Member
3 0 0

Hi Masterlau

One more question!

Do you know how to modify the code to remove the dark overlay from the section Collection List?

 

Thanks again!! 

0 Likes