Using CSS and Vue, you can customize the appearance of inactive thumbnails by displaying them

My goal is for a clicked thumbnail to display in color while the others show as grey. The active thumbnail will be in color, and I want inactive thumbnails to appear in grey.

Here is what I am trying 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="container-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;
}

.container-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;
   
}


.container-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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9bfbcac89fbe7fce7f8fa">[email protected]</a>/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>

javascripthtmlcssvue.jsvuejs2

Answer №1

To improve the CSS, I recommend shifting the filter from .thumbnails to .thumbnail-image>img and including filter: none; in .thumbnail-image:active>img

Your revised CSS should appear 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 issue arises when applying the grayscale filter to the container with class thumbnails, potentially overriding any existing settings within. To specifically target the thumbnail images, it's best to make the selection as precise as possible, hence focusing on .thumbnail-image>img. Additionally, the reversal of this effect upon clicking a thumbnail necessitates .thumbnail-image:active>img for the counteraction.

Answer №2

In order to get the desired outcome, simply insert the class="active" attribute into the img tag like so:

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

Next, include the following style rule in your CSS file:

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

This configuration results in a light green shade, but you have the option to adjust the filter values to achieve the exact color you desire.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Basic AJAX request not functioning properly

I am encountering an issue with a very simple AJAX call on my localhost. I am using a Windows 10 Machine with XAMPP running. I have checked the packages, and it seems that the AJAX request is not being sent to handle.php. Can someone help me figure out wha ...

phpjqueryhtmlajax

False return - Inoperative link - Scroll option

I have a JavaScript drop-down menu that is functioning correctly, but when I click on one of the links in the dropdown, the link does not work. I suspect it has something to do with my "return false/true" setup. Here's my JavaScript code: function d ...

javascriptjqueryajax

Troubleshooting: Issues with jQuery's Class selector

Having trouble setting up an alert to trigger when a specific class anchor tag is clicked inside a div. This is what my HTML section looks like... <div id="foo"> <a class='bar' href='#'>Next</a> </div> And h ...

javascriptjqueryhtmlselector

I am looking to change the state of only the element that is being moused over in a React Hooks useState function, rather than changing the

Currently, I have a component from line 61-67 that controls the state of an editIcon. The issue is that it changes the state values for all items in the column, rather than just the specific item or row it should apply to. When hovering over a span element ...

javascriptreactjsnext.jsuse-state

Unique column arrangement specifically designed for the initial row within the loop

My webpage features a layout that showcases 4 images on each row. However, I am looking to create a special first row with a unique column configuration compared to the rest of the rows. Here is an example of what I have in mind: This particular row will ...

javascriptnode.js

Uploading files in chunks using a combination of HTML, JavaScript,

I've been using a file chunking solution (although I can't recall its origin), but I've made some modifications to suit my requirements. Most of the time, the file uploads successfully; however, there are instances where an error occurs. U ...

javascriptphphtml

Is there a way to still access the data from a radio button even if it hasn't been selected?

I'm currently working on a questionnaire feature and facing an issue where I need to capture all answers, even if the radio button is not checked. Here's a snippet of the HTML code: $('input:radio').each(function () { if ($(this). ...

javascriptjquery

Exploring the interplay of Node.js, createServer function, and the asynchronous Event

In the world of node.js, how does the event loop interact with the http module's createServer method and its callback function? Can similar functionality to createServer be created in userland without modifying node's core system code? My unders ...

javascriptnode.js

What is the best method to fetch a specific post from supabase for showcasing in a dynamic Route with Nextjs14?

I'm currently working on a Next.js application where I am fetching posts from a Supabase database. Everything works fine when retrieving all posts, but when trying to retrieve a single post dynamically using the ID, the screen displays null. Here&apos ...

javascriptnext.jsroutesdynamicsupabase

Issues arise when trying to integrate Bootstrap modal with bootcards

I am currently implementing a modal with bootstrap: <div class="modal" id="contact-update-view"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-head ...

htmlcsstwitter-bootstrapmodal-dialogz-index

What is the best way to set the first option in a mat-select to be

My approach to date selection involves using 3 mat-select components for day, month, and year. You can view a demo of this setup here. In an attempt to improve the code, I decided to set the initial options as null by modifying the following lines: allDat ...

javascriptangulartypescriptangular-material

Connecting multiple promises using an array

After making an ajax call to retrieve an array of results, I have been attempting to process this data further by making additional ajax calls. However, when using Promise.all() and then continuing with .then(function(moreData){}), I noticed that the moreD ...

javascriptjqueryarraysajax

I am attempting to extract text from an element, but instead of the text, I received a value and am unable to click on it. This particular element is a dropdown button in a Selenium test, with

<div class="select-wrapper initialized"> <span class="caret">▼</span> <input type="text" class="select-dropdown" readonly="true" data-activates="select-options-56a6924e-42d9-1f78-1b82-fe2c1cbdfbdd" value="R3PORTS ...

htmlselenium

Image spotlight effect using HTML canvas

I am currently seeking a solution to create a spotlight effect on an HTML canvas while drawing an image. To darken the entire image, I used the following code: context.globalAlpha = 0.3; context.fillStyle = 'black'; context.fillRect(0, 0, image. ...

htmlimagecanvas

Leveraging TypeScript to sort and extract specific elements from two arrays

Given two arrays, I am looking to identify the elements in array2 that match elements in array1 based on a specific property. The arrays are structured as follows: var array1 = [ {"myId": 1, "text": "a"}, {"myId& ...

javascriptarraystypescriptecmascript-6filter

What is the correct regex expression for validating decimal numbers between 1.0 and 4.5?

I'm having trouble creating an expression to validate numbers between 1.0 to 4.5 accurately. The current expression I'm using is not working as intended: /^[1-4]{0,1}(?:[.]\d{1,2})?$/ The requirement is to only allow values between 1.0 to ...

javascriptangularregextypescriptvalidation

Python: parsing comments in a cascading style sheet document

I am currently working on extracting the first comment block from a CSS file. Specifically, I am looking for comments that follow this pattern: /* author : name uri : link etc */ and I want to exclude any other comments present in the file, such as: /* ...

pythoncssregexcommentstext-processing

Responsive Grey Tiles for Google Maps v3

I've successfully implemented Google Maps V3 in my project, but I'm encountering an issue with grey tiles appearing on the map. I attempted to fix this problem by triggering a resize event using the following code snippet: google.maps.event.trig ...

javascriptjquerygoogle-mapsgoogle-maps-api-3

Using HTML and CSS to stack a DIV on top of another using z-index

I have 3 main layers on my website: 1) The main view with elements inside (#views in jsbin) - BOTTOM LAYER 2) An overlay (with a white background opacity of .8 #overlay in jsbin) - MIDDLE LAYER 3) A context menu (#contextmenu in jsbin) - TOP LAYER Wh ...

javascripthtmlcssz-index

Shift all content to the right when viewing on mobile devices

I'm looking to create space for a menu on the left side, similar to the one on Mashable's mobile view. How can I move all the content to the right? Feel free to resize the window and compare with . Thank you. Best regards, Marius ...

javascriptjquerycsshtml