How to apply opacity to the pictures in the blog grid until you hover above them?

Technical Q&A
1

Hello,
in the debut theme the standard is opacity on hover. I want to reverse that, that the pictures are cleared of opacity on hover in the blog grid.
If possible only in one blog because there are two on my site:

  • interviews (where I wish to have reversed opacity)
  • articles (with theme standard opacity settings, no changes)

Does somebody have a solution?

2

Hi @DoctorDoctor

Welcome to Shopify Community.

Aibek is here from Speedimize.io

By default, the value of this style for hover is set to the tag in debut

.a:hover, a:focus {

opacity: 0.6;

}

You will need to change and set the default to always be opacity, as in the example below:

#shopify-section-blog-template p > a{
opacity: 0.6;
}
#shopify-section-blog-template p > a:hover {
opacity: 1;
}

Just copy and paste this code, then it will work as you want.

If suddenly, it does not work, then there may be a problem in the priority. In this case, just add !important to the end of the property.

For example:

opacity: 0.6 !important;

Hope that helps you.
3

Thanks for your reply!
it seems to work if you leave the p >a part out (for what is it?) like this:

#shopify-section-blog-template a{
   opacity: 0.6;
}
#shopify-section-blog-template a:hover {
   opacity: 1;
}

It´s just that the headline is now affected with opacity too. How can I apply this to the image only? And can this effect target just one blog instead of all blogs globally?

(You might want to take a look: https://die-weisse-wand.myshopify.com/blogs/interviews-zu-den-kunstkaufen pwd: bonjour)

Thanks!

4

Thanks for getting back to me so quickly.

Your theme structure is slightly different from our Debut. So we re-wrote the styles.
To get started, you will need to delete a couple of lines here:

.article__link:not([disabled]):hover .article__grid-image-wrapper::before, .article__link:focus .article__grid-image-wrapper::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--color-image-overlay); - this line need to delete
opacity: var(--opacity-image-overlay); - and this one you need to delete
z-index: 1;
}

Next, you can delete the styles that we sent you, they are no longer relevant.

Now you will need to put opacity on the image:

.article__link .article__grid-image-wrapper {
opacity: 0.6;
}

Next, we already prescribe hover:

.article__link .article__grid-image-wrapper:hover {
opacity: 1 !important;
}

Thus, opacity will not be set on the headline. Only on the picture.

Hope that helps you.

1 Like
5

This helped a lot.

Now, I have one blog, where your given answer shall be applied and one where the default shall remain.
For this I created a new blog template (& section) called blog.blog-fade-out & blog-fade-out-template (in hindsight, I should have called it fade-in for it´s purpose).

.article__link:not([disabled]):hover .article__grid-image-wrapper::before, .article__link:focus .article__grid-image-wrapper::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--color-image-overlay); - this line needs to except blog.blog-fade-out or the section
opacity: var(--opacity-image-overlay); - and this one too needs to except blog.blog-fade-out or the section
z-index: 1;
}

How can I except the new blog from those two lines of global code?

6

Hey @DoctorDoctor

Thanks for getting back to me.

https://die-weisse-wand.myshopify.com/blogs/mit-kunst-leben-kunstkaufer-neu - opacity has stopped working since you returned those 2 lines back.

For now, delete these lines. the ID is already specified in the template #shopify-section-blog-fade-out-template. Let’s make it a default template. Add this id to an already existing style, as in the example below:

#shopify-section-blog-fade-out-template .article__link .article__grid-image-wrapper { 
     opacity: 0.6; 
}
#shopify-section-blog-fade-out-template .article__link .article__grid-image-wrapper:hover { 
   opacity: 1 !important; 
}

In this way, we isolate our solution specifically for this template.

For another template, with the id #shopify-section-blog-fade-out, you need to return these two lines, but as a separate style, as in the example below, specifying the id of the already given theme:

#shopify-section-blog-fade-out .article__link:not(blog.blog-fade-out):hover .article__grid-image-wrapper::before, #shopify-section-blog-fade-out .article__link:focus .article__grid-image-wrapper::before {
  background-color: var(--color-image-overlay);
  opacity: var(--opacity-image-overlay);
}

Now everything should work as before in this template.

1 Like