Archived topic

Black and white sidebar widget

1 reply · Started by Conor on October 2, 2019

Viewing posts 1–2 of 2

October 2, 2019 at 7:08 am #1024243

Hi,

I have amazon affiliate images of books on my sidebar. I get these images from my amazon associate account. I'm wondering if I can add any code to make these images appear black and white.

The reason I want to do this is because I find the images distracting for the reader. I want the blog content to be the main focus and for the images to be there, but not draw the eye.

Cheers, C

October 2, 2019 at 7:16 am #1024250

Hi there,

you can use CSS filters to do that, try this:

.sidebar #custom_html-3 img {
    -webkit-filter: grayscale(1);
            filter: grayscale(1);  
}

And if you want to get fancy and have the color reveal on hover then you can add this instead:

.sidebar #custom_html-3 img {
    -webkit-filter: grayscale(1);
            filter: grayscale(1);  
    transition: filter 0.3s ease-in;
}
.sidebar #custom_html-3 img:hover {
    -webkit-filter: grayscale(0);
            filter: grayscale(0);  
}

This archived topic is closed to new replies.

Start building better websites today.