Скрытие изображения кнопкой

Вопрос или проблема

export default function TouristHomePageNavigation(){
    const [navigation,setNavigation] = useState(1);
    const buttonNames = ["Впечатления","Проживание","Путешествия","Магазин"];
    return(
        <>
        <div className="flex bg-green-500 justify-center pt-2 z-10 relative px-0">
            {buttonNames.map((buttonName,index) => (
                <NavigationButton index={index+1} navigation={navigation} setNavigation={setNavigation} buttonName={buttonName} />  
            ))}
        </div>
        <div className=" h-1/2 absolute w-full top-0 z-0">
            <img src={HotAirImage} draggable={false} className="w-full h-full object-cover" />
        </div>
        </>
    )
}

function NavigationButton(ButtonProps : ButtonProps){
    return( 
        <Button className={cn("rounded-none rounded-t-md min-w-[10%]", ButtonProps.navigation == ButtonProps.index ? "bg-transparent" : "bg-white text-foreground")} onClick={() => ButtonProps.setNavigation(ButtonProps.index)}> {ButtonProps.buttonName} </Button>
    )
}

Ответ или решение

Для реализации эффекта, когда кнопка навигации становится прозрачной и позволяет увидеть изображение за ней, необходимо внести несколько изменений в ваш компонент React. В этом ответе мы рассмотрим, как это сделать.

Код для компонента TouristHomePageNavigation

Давайте начнем с вашего первоначального кода и внесем необходимые изменения, чтобы кнопка могла "маскировать" часть изображения при нажатии.

import React, { useState } from 'react';
import HotAirImage from './path/to/your/image.jpg'; // Импортируйте свое изображение

export default function TouristHomePageNavigation() {
    const [navigation, setNavigation] = useState(1);
    const buttonNames = ["Experiences", "Stays", "Travel", "Shop"];

    return (
        <>
            <div className="flex bg-green-500 justify-center pt-2 z-10 relative px-0">
                {buttonNames.map((buttonName, index) => (
                    <NavigationButton 
                        index={index + 1} 
                        navigation={navigation} 
                        setNavigation={setNavigation} 
                        buttonName={buttonName} 
                    />
                ))}
            </div>
            <div className="h-1/2 absolute w-full top-0 z-0">
                <img src={HotAirImage} draggable={false} className={`w-full h-full object-cover ${navigation === 1 ? '' : 'opacity-30'}`} />
            </div>
        </>
    )
}

function NavigationButton({ index, navigation, setNavigation, buttonName }) {
    return (
        <button 
            className={`rounded-none rounded-t-md min-w-[10%] ${navigation === index ? "bg-transparent" : "bg-white text-foreground"}`} 
            onClick={() => setNavigation(index)}
            style={{
                opacity: navigation === index ? 0 : 1, // Уменьшаем непрозрачность кнопки, чтобы создать эффект маскирования
                transition: 'opacity 0.3s ease' // Плавный переход для лучшего визуального эффекта
            }}
        >
            {buttonName}
        </button>
    );
}

Объяснение кода

1. Состояние Навигации: Мы используем хук состояния для хранения текущей нажатой кнопки.

2. Кнопки Навигации: Для каждой кнопки устанавливается класс, который определяет ее внешний вид. Если кнопка активна (navigation === index), то ее фон становится прозрачным (bg-transparent).

3. Эффект Маскирования:

   • Мы добавили стиль opacity для кнопки. При нажатии на кнопку её непрозрачность изменяется, ведя к визуальному эффекту, как будто она "маскирует" часть изображения, находящегося за ней.
   • Также введен плавный переход для изменения opacity, чтобы визуально улучшить пользовательский интерфейс.

4. Изображение: Используйте класс opacity-30, чтобы сделать изображение менее заметным на фоне, когда это необходимо. Это может быть изменено в зависимости от ваших нужд.

5. Импорт Изображения: Не забудьте заменить ./path/to/your/image.jpg на фактический путь к вашему изображению.

Заключение

С помощью описанных изменений вы можете достичь прозрачного эффекта кнопок, который покажет изображение за ними. Благодаря этому, ваш интерфейс станет более интерактивным и привлекателен для пользователей. Если у вас есть дополнительные вопросы или нужна помощь с другими аспектами вашего проекта, не стесняйтесь обращаться!