Как реализовать анимацию выбора альбома на React?

Хочу реализовать подобную анимацию на своем сайте (пример: https://juliecristobal.com/) . При клике на фотографию, соседние исчезают выбранная становится больше и по центру, после этого загружаются все фото выбранного альбома

 import React, {useState,useEffect} from "react";
 import { connect } from "react-redux";
 import { withRouter } from "react-router";
 import { compose } from "redux";
 import s from './slider.module.css'
 import SliderItem from "./SliderItem/SliderItem";
 import HorizontalScroll from 'react-scroll-horizontal'
 import Preloader from '../common/Preloader/Preloader'
 import { getAlbums } from "../../redux/slider-reduser";

const Slider = (props) => {

const year = props.match.params.year;
const [loadet, toggleLoadet] =  useState(false);


useEffect(() => {
    props.getAlbums(year).then(() => {
        toggleLoadet(true);
    })
}, []);

if(!loadet) {
    return <Preloader />
}

return (
    <div className={s.slider}>
        <h1 className={s.title}>{year}</h1>
        <HorizontalScroll
            reverseScroll={true}
            className={s.sliderItemsWraper}>
            {
                props.sliderItems.map((item, i) => {
                    return <SliderItem
                        translate={i % 2 === 0 ? 'translate': ''} 
                        key={item.id} 
                        image={item.album_image}
                        title={item.name}
                        id={item.id}
                    />
                }) 
            }
        </HorizontalScroll>
    </div>
);
}

const mapStateToProps = (state) => {
    return {
        sliderItems: state.slider.sliderItems,
    }
}


export default compose(
    withRouter,
    connect(mapStateToProps, {getAlbums}),
)(Slider)


import React from "react";
import { withRouter } from "react-router";
import { NavLink } from "react-router-dom";
import s from './slider-item.module.css'

const SliderItem = (props) => {

    return (
        <NavLink to={`/album/${props.id}`}>
            <img width={'500px'} height={'500px'} src={props.image} 
                data-id={props.id}
                alt={props.title} 
                data-hover={props.image}  
                className={`${s.img} ${props.translate ? s.itemTranslate : ''}`}
            />
        </NavLink>
    )
}
export default withRouter(SliderItem);