Color change on hover over

Question

I have a list of pictures and when I hover on a picture, I want the rest of pictures turn to black and the one which I'm hovering stays in its original color. would you please help me to do it?

.inst__img { width: 11%; margin-left: 10%; display: inline-block; } .inst__img img { width: 100% }

<section class="global__inst"> <div class="inst__img"> <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt=""> <span>vi</span> </div> <div class="inst__img"> <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt=""> <span>vi</span> </div> <div class="inst__img"> <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt=""> <span>vi</span> </div> <div class="inst__img"> <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt=""> <span>vi</span> </div> </section>

mplungjan · Accepted Answer · 2020-04-05 14:33:05Z

You need to select not hovered images for grayscale: img:not(:hover)

.inst__img { width: 11%; margin-left: 10%; display: inline-block; } .inst__img img{ width: 100%; } .global__inst:hover img:not(:hover) { filter: grayscale(1); -webkit-filter: grayscale(1); }

<section class="global__inst"> <div class="inst__img"> <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt=""> <span>vi</span> </div> <div class="inst__img"> <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt=""> <span>vi</span> </div> <div class="inst__img"> <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt=""> <span>vi</span> </div> <div class="inst__img"> <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt=""> <span>vi</span> </div> </section>

Johny · Accepted Answer · 2020-04-05 14:38:30Z

Use this:

.inst__img { width: 11%; margin-left: 10%; display: inline-block; } .inst__img img { width: 100% } .global__inst:hover .inst__img img { filter: grayscale(100%); } .inst__img:hover img { filter: none !important; }

<section class="global__inst"> <div class="inst__img"> <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt=""> <span>vi</span> </div> <div class="inst__img"> <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt=""> <span>vi</span> </div> <div class="inst__img"> <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt=""> <span>vi</span> </div> <div class="inst__img"> <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt=""> <span>vi</span> </div> </section>

Thanks for the snippet, small typo, fixed my code. But mplungjan answer should be accepted, it's better.

Uwe Keim · Accepted Answer · 2020-04-05 14:44:37Z

please try the below one. initial all the list images will be black and the hover one can display as you like

.inst__img{ border:2px solid red; background: black; opacity:.5 } .inst__img:hover{ border:2px solid red; background: white; opacity:1 }

Collectives™ on Stack Overflow

Color change on hover over

3 Answers 3

1 Comment

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Related