Skip to main content

Return to Question

deleted 534 characters in body
Source Link
mplungjan
mplungjan
  • 180k
  • 29
  • 183
  • 246
.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>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>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>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>vi</span>   </div>  </section>
.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>
.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>
Source Link
elahe
elahe
  • 31
  • 3

Color change on hover over

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>