Remove the Featured image effect

Sparkling
1

Hello

How do I remove the effects of feature image effect (transparency?)

It appears it may also very slightly zoom or shift the image 1px.

eg I see on the sparkling theme home page with eg a width of 1099px, it seems to shift 1px wider in chrome, safari seems to zoom 1px.

Any help

Thanks again

2

To remove the opacity hover effect from the featured images, use this custom css:

.single-featured:hover {
opacity: 1.0;
}
.single-featured-2:hover {
opacity: 1.0;
}

There are a few other ways to achieve it, but that is the simplest solution.

Alternatively you could remove both of those hover classes completely (rather than force them to stay at 100% opacity like in my example) since the hover is no longer needed. However, it’s best to leave the classes in there in case you want to add a different effect later on down the road. Personally I changed mine to make the images fade to grayscale on hover, but that’s just my preference.

You can also do sepia, contrast, hue, etc.

3

Thanks krisbap

Thats great and I was going to add an effect like you suggested, but wasn’t able to pinpoint the control name.

Thanks again

4

No problem.

If you want to change the effect, here’s my own code to use as a reference:

.single-featured {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
display: block;
margin: auto;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

.single-featured:hover {
-webkit-filter: grayscale(50%);
filter: grayscale(50%);
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

As you can see I set it to only fade to 50% grayscale since going to 100% wasn’t subtle enough for my taste, but you can adjust that to your liking.

To use any other effect, just replace the word grayscale (all 4 instances) with sepia, contrast, or whatever effect you want.

5

Thanks you

I changed to:

.single-featured {
   -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
   display: block;
   margin: auto;
   -webkit-transition: .5s ease-in-out;
   transition: .5s ease-in-out;
}
.single-featured:hover {
   opacity: 1.0;
   -webkit-filter: grayscale(0%);
   filter: grayscale(0%);
   -webkit-transition: .9s ease-in-out;
   transition: .9s ease-in-out;
}

You might be able to tell me what “.single-featured-2” is?

Thanks again

6

Hi @krisbap,

I hope you are well today and thanks for helping out here in this forum.

Your help here is really appreciated.

Thanks,
Movin