Как сделать hover эффект для списка изображений?

Question

[mrrangerr]

Всем добрый вечер. Мне нужно сделать hover эффект для каждого изображения в списке изображений. Как это сделать, подскажите пожалуйста

function ListPhotos() {
    const [photos, setPhotos] = useState([])
    const [perPage, setPerpage] = useState(1)
    const [hovered, setHovered] = useState(false)
   

    const getData = useCallback(() => {
        unsplash.photos
            .listPhotos(perPage, 15, "latest")
            .then(toJson)
            .then(json => {
                setPhotos([...photos, ...json])
                setPerpage(perPage + 1)
            })
    }, [photos, perPage])

    useEffect(() => {
        getData()
    }, [])


    const styles = {
        padding: "15px",
    }

    
    const childElements = photos.map(photo => (
        <li className="list-unstyled">
            <Link to={`/${photo.id}`}>
                <img
                    className="rounded"
                    style={styles}
                    src={photo.urls.small}
                    alt={photo.description}
                    onMouseOut={() => {
                        setHovered(true)
                    }}
                    onMouseOver={() => {
                        setHovered(false)  
                    }}
                />
            </Link>
        </li>
    ))

    
    return (
        <div className="container-fluid">
            <div className="row p-4">
                <div className="col-12">
                    <InfiniteScroll dataLength={photos.length}
                        next={getData}
                        hasMore={true}
                        loader={<div className="spinner-border" role="status">
                            <span className="sr-only">Loading...</span>
                        </div>}
                    >
                        <Masonry elementType={"ul"}>
                            {childElements}
                        </Masonry>
                    </InfiniteScroll>
                </div>
            </div>
        </div>
    )
}

export default ListPhotos

Answer 1

[hzzzzl]

как-то так

const childElements = photos.map(photo => (
        <li className="list-unstyled">
            <Link to={`/${photo.id}`}>
                <img
                    className={`rounded ${ hovered === photo.id ? 'hover-class' : '' }`}
                    style={styles}
                    src={photo.urls.small}
                    alt={photo.description}
                    onMouseOut={() => {
                        setHovered(null)
                    }}
                    onMouseOver={() => {
                        setHovered(photo.id)
                    }}
                />
            </Link>
        </li>
    ))

Comments

[mrrangerr]

получается в css по классу hover-class мне нужно описать логику ховер эффекта, правильно?
и как мне для ховер эффекта переиспользовать компоненты которые у меня уже есть?

[hzzzzl]

mrrangerr,

как мне для ховер эффекта переиспользовать компоненты которые у меня уже есть

мммм, ну в этом отрезке кода ничего про них не было
как они работают?
может можно все картинки в них завернуть и туда прокидывать проп типа

<HoverComponent doSomeShit={hovered === photo.id}>
 <img ... />
<HoverComponent />

[hzzzzl]

mrrangerr, аа, так может и правда проще сделать один компонент ImageWithHoverEffects, который будет в зависимости от пропа либо рисовать эти дополнительные элементы либо быть просто картинкой

[hzzzzl]

например вот на скорую руку, Image вообще пофиг откуда вставлять, всегда будет с оверлеем при ховере

[mrrangerr]

hzzzzl, Да! Вы правы, теперь ясно стало. Посылаю лучи добра! Огромное спасибо)