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

Rotating an Object3D in Three.js using an axis rotation technique

I am attempting to change the orientation of a mesh that has been loaded into an Object3D using OBJMTLLoader. var obj = new THREE.Object3D(); // loading process... obj.rotation.y += 0.1; //executed within the update function This method works correctly ...

javascriptrotationthree.js

The waveform's bottom appears distorted when using Bootstrap

I'm currently experimenting with creating a header wave in Bootstrap CSS using SVG shape. However, I encountered an issue when implementing bootstrap into the HTML code - my design resembles the second image instead of the desired look of the first on ...

htmlcsstwitter-bootstrapsvg

Is it possible to trigger an event each time an Ajax request is made within AngularJS?

I am looking for a way to automatically display a spinner with a dark overlay every time a call is made to the backend. While I know I can manually implement this by triggering the spinner before each call, I prefer a solution that does not require addit ...

javascriptajaxangularjsexpress

The ng-click event is not triggering the Controller Function as expected

This is the Code for My View <div ng-controller="signupCtrl"> <ul class="list-group" > <li class="list-group-item"> <div class="form-group"> <input type="text" ng-model="signupCtrl.firstName"> ...

javascriptjqueryangularjs

Next-Auth: Access Session in _app.js Directly Without Using getServerSideProps

When working with React.js and React-Auth, it's important to note that calling server-side functions such as getServerSideProps can prevent you from exporting your project using next export. Below is the content of my pages/_app.js, which I structured ...

javascriptnode.jsnext.jsnext-auth

Convert the list items into JSON format

<div class="col-xs-4 no-padding contenteditable-color" style="background-color: transparent;"> <ul class="ul-product"> <li class="li-product-page cars contenteditable" contenteditable="false">qweryt</li> </ul&g ...

javascriptjqueryjson

Testing URL Parameters in JEST with an API

Seeking integration tests using Jest for an API endpoint. Here's the specific endpoint: http://localhost/universities/ucla/class/2013/studentalis/johndoe. When tested with a put request, it returns 201 on Postman. However, the testing encountered a t ...

javascriptexpressjestjssupertest

What is the best way to notify the JSON code below using jQuery?

I have received a JSON response after using the Reverse Geocoding API from Google. The response includes various address components such as route, sublocality, locality, and political information. { "results": [ { "address_components": [ ...

javascriptjsongoogle-api

Unable to trigger ng-click event in IE browser, while it functions properly in Chrome

<select id="from" multiple="multiple" name="list" ng-model="selectedVal"> <optgroup label= "{{geo.Geo}}" ng-repeat="geo in Geographies"> <option id="{{country.CountryKey}}" ng-repeat="country in geo.Country" ng-click="arrayPush( ...

javascriptangularjsangularjs-ng-click

A guide on sending arguments to a react function component from a JSX component via onClick event handling

Below is a brief excerpt from my extensive code: import React from "react"; const Home = () => { return ( imgFilter.map((imgs) => { return ( < Col sm = "3" xs = "12" key ...

javascriptreactjsjsx

Executing a Ruby function via AJAX

I am fairly new to working with ajax, and I find myself in need of using it for my Rails application. Here is the function in my controller: def check_code input = params[:input] code = params[:code] if input == code return true else retur ...

javascriptruby-on-railsajax

What is the method for transforming a string containing the name of an array into a format that can be displayed in a Vue.js template?

<b-card v-for='callType in callTypes' no-body class="mb-1"> <b-table striped hover :items="{{callType.lineType}}"> </b-table> </b-card> When each callType is the name of an array. callTypes: [m ...

javascriptarraysvue.jsv-for

Error in WordPress: The table prefix cannot be blank

While setting up WordPress, I encountered an issue during the database details input in the first step of the installation process. I am using XAMPP and have tables in my database named wordpress_tbl_table1 and wordpress_tbl_table2. I entered "wordpress_tb ...

htmlcsswordpressxampp

Clickability issue with searchbar results caused by onBlur event

My searchbar functionality includes showing results in a dropdown list when the user searches. However, I am facing an issue with the onBlur event that changes the display of the list to none when the user clicks away from the search box. The problem aris ...

javascripthtmlreactjs

WordPress site experiencing issues with sub-menus disappearing following recent upgrade

I'm currently investigating a problem on a WordPress website where sub-menus are not showing up after upgrading to WP 3.9.1. The website, which can be found here, is using the Zeus theme (v. 1.1.0) and it seems that the behavior of the sub-menus is co ...

jquerycsswordpressmenunavigation

How to access a custom filter in ng-repeat using AngularJS

I'm working on creating a filter to sort through the items displayed in a table. Specifically, I want to filter out items based on a certain property value that may change depending on user input. I have attempted the following approach and it seems t ...

javascriptangularjsangularjs-filter

JavaScript Popup Box Failing to Trigger

Snippet of Code: <form method="post" id="cp_ind_form"> // several input fields here... <input type="submit" name="update_submit" value="Update" /> <input type="submit" name="delete_submit" value="Delete" onclick="deleteConfi ...

javascripthtmldialog

Bootstrap - Progress Bar Display

I have a mobile application that is built using Bootstrap 3. I am currently working on creating a responsive progress indicator for the app. This indicator will consist of three to five steps, each showing an icon, step name, and status. On mobile devices, ...

csstwitter-bootstrap

Display the closest locations on the Google Maps interface

I am currently working on a project that involves integrating Google Maps. The project includes storing hospital addresses (in longitude and latitude) in a database. However, I need assistance in displaying the nearest hospital from my current location. I ...

javascriptjquerygoogle-maps

Deliver a JSON response using Express

Attempting to implement a chat-gpt response in Node, I encountered an issue where the server is not serving up the data successfully, only returning {}. index.js import gptSummary from "./gptFunc.js"; import express from "express"; co ...

javascriptnode.jsexpresschatgpt-api