willaengine/resources/js/Global/components/Inputs/ImageSelect.vue

<template>
    <v-row>
        <v-col v-for="(item, i) in items" :key="i" class="image-select" @click="changeSelected(item)" :class="`${size} pa-1`">
            <div :class="{'active': isActive(item), 'item': true, 'selected': (i == 2)}">
                <img class="thumbnail width-full" :src="item[itemSrc]"/>
                <div class="name">
                    <div class="content">
                        <div class="Fa"> {{ item[itemText] }}</div>
                        <div class="En"> {{ item[itemTextEn] }}</div>
                    </div>
                </div>
                <div class="icon-wrapper">
                    <v-icon class="WMi-ok" color="white"></v-icon>
                </div>
            </div>
        </v-col>
    </v-row>

</template>
<script>
    export default {
        props: {
            size: {default: "col-xl-2"},
            items: {default: []},
            itemValue: {default: 'id'},
            itemText: {default: 'name'},
            itemTextEn: {default: 'name_en'},
            itemSrc: {default: 'src'},
            value: {default: ''}
        },
        data: () => ({
            thumbnail: "images/Business/Items/iPhoneX.jpg",
        }),
        computed: {
            currentSelect: {
                get() {
                    return this.value;
                },
                set(value) {
                    this.$emit('input', value);
                }
            }
        },
        methods: {
            isActive(item) {
                return item[this.itemValue] === this.value;
            },
            changeSelected(item) {
                this.currentSelect = item[this.itemValue];
            }
        }
    };
</script>
<style lang="scss" scoped>
    .no-en .content .En {
        display: none;
    }
    .en-ltr-0  .image-select .item .name .En {
        letter-spacing: 0px;
    }
    .image-select {
    }
    .image-select .item {
        position: relative;
        border: 1px solid transparent;
        transition: 0.2s;
        cursor: pointer;
    }

    .image-select .item .icon-wrapper {
        display: none;
        background-color: var(--color-blue);
        text-align: center;
        justify-content: center;
        color: #fff;
    }

    .image-select .item.selected {
        border: 1px solid var(--color-blue);
    }

    .image-select .item.selected .icon-wrapper {
        display: flex;
        position: absolute;
        right: 0px;
        bottom: 0px;
    }

    .image-select .item .thumbnail {
        position: relative;
    }

    .image-select .item .name {
        display: flex;
        position: absolute;
        width: 100%;
        height: 100%;
        color: #fff;
        right: 0px;
        top: 0px;
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s, opacity 0.2s linear;
        background-color: rgba(0, 0, 0, 0.8);
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .image-select .item .name .Fa {
        font-size: 18px;
        line-height: 24px;
    }

    .image-select .item .name .En {
        font-size: 12px;
        line-height: 18px;
        letter-spacing: 5px;
        text-transform: uppercase;
        opacity: 0.8;
    }

    .image-select .item:hover, .image-select .item.active {
        border: 1px solid #2f353b;
        /*padding: 5px;*/
    }

    .image-select .item:hover .thumbnail, .image-select .item.active .thumbnail {
        -webkit-filter: grayscale(0%);
    }

    .image-select .item:hover .name, .image-select .item.active .name {
        visibility: visible;
        opacity: 1;
        width: 100%;
        height: 100%;
    }


</style>