Display inactive thumbnail as grey in CSS and Vue

问题:

When I click on a thumbnail, I'd like it to display in color and the other thumbnails as grey. So When you click on a thumbnail is active and to illustrate I want to have the thumbnail in color, and the other thumbnails in grey because they are inactive.

This is what I'd like to achieve:

Vue.component('carousel', {
    template: `
        <div class="card-carousel" >
            <div class="thumbnails">
                <div 
                    v-for="(image, index) in  images"
                    :key="image.id"
                    :class="['thumbnail-image', (activeImage == index) ? 'active' : '']"
                    @click="activateImage(index)">
                    <img :src="image.thumb"/>
                   
                </div>
            </div>
            <div class="containe-carousel">

                <span> {{currentImage.text}}</span>
            <div class="photoshop-screenshot">                
            <img :src="currentImage.big"  alt="">
                    
            </div>
            <div class="card-img">
                <img :src="currentImage2.big2" alt="">
                   

            </div>
            </div>
        </div>
    `,
    computed: {

        currentImage() {
            return this.images[this.activeImage];
        },

        currentImage2() {
            return this.images[this.activeImage];
        }
     
    },

        data() {
            return {
                activeImage: 0,
            
            }
        },

        methods: {     
            activateImage(imageIndex) {
                this.activeImage = imageIndex;
            },  
            
        
        },
    
        props: ['images']
    });

.section{
    background-color: black;
}

.card-carousel {
    user-select: none;
    position: relative;
}

.containe-carousel {
    padding-top: 5%;
}

.thumbnails {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;

}

.thumbnail-image {
    display: fixed;
    align-items: center;
    cursor: pointer;
    padding: 2px;

}

.thumbnail-image > img {
    width: 100%;
    height: auto;
    transition: all 250ms;
    filter:  grayscale(100%);

}

.thumbnail-image:selected> img {
    box-shadow: 2px 2px 6px 1px rgba(0,0,0, 0.5);
    visibility: hidden;
    filter: none;
}


.card-img {
    position: relative;
}

 .card-img > img {
    margin: 0 auto;
    padding-top: 7%;
    z-index: 2; 
}

 .photoshop-screenshot {
    position:absolute;
    z-index: 1;
    width: 70%;
    right:-80px;
    bottom:-130px;
   
}


.containe-carousel span {
    
    color: white;
    font-weight: bold;
    box-shadow: -0.3125em 0.3125em 0 0 rgba(0, 0, 0, 0.15);
}

                 
        <section class="section" id="app">
            <div class="container">
                <div class="text-center" style="margin:0px 50px">
                    <div class="heading-underscore">
                        <h2 class="dk-5q-color">
                             <?php say("X50Q-dashboard-title"); ?>
                         </h2> 
                    </div>
                    
                </div>
                <div class="columns">
                     <div class="column "> 
                        <div class="card-content">
                            <carousel
                                :starting-image="0"
                                :show-progress-bar="true"
                                :images="images"     
                            ></carousel>
                    
                        </div>   
                    </div> 
                </div>
            </div>            
    </section>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    
<script src ="/x/x50q-rgb-mechanical-keyboard/x50q-cloud-js.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data() { 
                
                return {
                    images: [
                       
                        {
                            text : 'Photoshop',
                            id: '1',
                            big: '/images/das-keyboard-x50q/photoshop-profile.PNG',
                            big2: '/images/das-keyboard-x50q/photoshop-screenshot.png',
                            thumb: '/images/das-keyboard-x50q/photoshop-logo.jpg'
                        },
                        {
                            text : 'Aurocad',
                            id: '2',
                            big: '/images/das-keyboard-x50q/autocad-profile.png',
                            big2: '/images/das-keyboard-x50q/autocad-screenshot.png',
                            thumb: '/images/das-keyboard-x50q/autocad-logo.png'
                        },
                        {
                            text : ' Counter-Strike',
                            id: '3',
                            big: '/images/das-keyboard-x50q/counterstrike-profile.png',
                            big2: '/images/das-keyboard-x50q/counterstrike-screenshot.jpg',
                            thumb: '/images/das-keyboard-x50q/counterstrike-logo.png'
                        },
                        {
                            text : 'League of Legends',
                            id: '4',
                            big: '/images/das-keyboard-x50q/leagueoflegends-profile.png',
                            big2: '/images/das-keyboard-x50q/leagueoflegends-screenshot.png',
                            thumb: '/images/das-keyboard-x50q/leagueoflegends-logo.jpg'
                        }
                    ],
                    
                
                }
            }
        });
    </script>

回答1:

I'd rotate the filter from .thumbnails to .thumbnail-image>img instead and add a filter: none; to .thumbnail-image:active>img

Your CSS should look like this:

.thumbnails {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  }

.thumbnail-image {
  display: fixed;
  align-items: center;
  cursor: pointer;
  padding: 2px;
  }

.thumbnail-image>img {
  width: 100%;
  height: auto;
  transition: all 250ms;
  filter: grayscale(100%);
  }

.thumbnail-image:active>img {
  box-shadow: 2px 2px 6px 1px rgba(0, 0, 0, 0.5);
  visibility: hidden;
  filter: none;
  }

The problem is that when you add the grayscale filter to the container of class thumbnails, you are essentially overwriting anything that may have been set inside. If you want to affect the thumbnail images, you should make it as specific as possible, that's why .thumbnail-image>img is your primary target. Furthermore, when you click on the thumbnail you need to undo this change so .thumbnail-image:active>img is your override.

回答2:

To achieve the wished result add this attribute class="active" to the img tag as follow:

<img :src="image.thumb" class="active"/>

and add the following rule to your CSS :

.active{ 
   filter: sepia(100%) hue-rotate(19deg) saturate(98) brightness(98%) ; 
   border:3px solid #fff; 
 }

this gives a light green color but you could change the filter functions to achieve the desired colour.