Hi Lucy,
You'll want to go into your theme.scss.liquid file located in your theme assets and find the code below:
.collection-grid-item__title-wrapper::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: $color-image-overlay;
opacity: $opacity-image-overlay;
}
What's causing the color overlay is "background-color: $color-image-overlay;" you can either delete that line or comment it out like below:
.collection-grid-item__title-wrapper::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* background-color: $color-image-overlay; */
opacity: $opacity-image-overlay;
}
YES! This has worked, thank you so much Nick! I've been stuck on that for weeks! Can this also be done for the main hero image, if so would you mind pointing me to that code?
Also, is there anyway to make it lighten on hover? Previously it was a darkened image that lightened to its true state, I'd like it to be the normal image with a lighter/white overlay on hover if possible. Thanks again!
Hi Lucy,
I'm seeing that is already happening on my end (at a .60 opacity) however if you want it more white you can do the following:
Paste this at the bottom of your "theme.scss.liquid" file:
/*================ #Custom Overlay ================*/
$custom-opacity-link-hover: .40;
.custom_overlay {
a {
color: $color-text;
text-decoration: none;
&:hover,
&:focus {
opacity: $custom-opacity-link-hover;
}
}
}
In your snippets open "collection-grid-item.liquid" and find the code below:
<div class="collection-grid-item">
Replace it with this code:
<div class="collection-grid-item custom_overlay">
If you want the white to appear differently you can adjust the opacity in the $custom-opacity-link-hover variable
Subject | Author | Latest Post |
---|---|---|
Subject | Author | Posted |
---|---|---|
5m ago | ||
18m ago | ||
36m ago | ||
43m ago | ||
59m ago |