How to add fade effect with Tailwind CSS?

[edwinvelez]

I have a NextJs project.

The most important parts of my page.tsx file are below. Then there is my next-js-image.tsx file. I am also using Tailwind CSS. My ultimate goal is to change the the z-index of the image on hover.

In page.tsx I commented out componentsProps. If I leave it then onClick does not work as anticipated. I know and understand why this is happening. It is because of the -z-10 class passed in. But I want to use this class.

As a workaround, rather than pass in the class via componentsProps, in next-js-image.tsx I add -z-10 to className of <Image /> component. This normally should not be an issue. But I am also "circumventing" the intended process of using either <PhotoAlbum /> or <Lightbox />.

Since className is no longer needed in next-js-image.tsx, I removed it to keep things tidy. Also, I moved the onClick event to the wrapping <div />.

And now my question. Is this correct? Is there a better way? Could there be any side effects should I in the future intend to expand my use of <Lightbox />?

page.tsx

'use client';

import NextJsImage from '@/components/next-js-image';
import NextJsLightbox from '@/components/next-js-lightbox';
import { photoGalleryImages } from '@/lib/photo-gallery-images';
import { useState } from 'react';
import PhotoAlbum from 'react-photo-album';
import Lightbox from 'yet-another-react-lightbox';

import 'yet-another-react-lightbox/styles.css';

export default function Home() {
  const [index, setIndex] = useState(-1);
  const maxImageCount: number = 3;

  return (
    // ...
        <PhotoAlbum
          photos={photoGalleryImages.slice(0, maxImageCount)}
          layout={'rows'}
          renderPhoto={NextJsImage}
          defaultContainerWidth={1200}
          // componentsProps={() => ({
          //   imageProps: { className: '-z-10' },
          // })}
          onClick={({ index: current }) => setIndex(current)}
          sizes={{ size: 'calc(100vw - 240px)' }}
        />

        <Lightbox
          index={index}
          slides={photoGalleryImages.slice(0, maxImageCount)}
          open={index >= 0}
          close={() => setIndex(-1)}
          render={{ slide: NextJsLightbox }}
        />
    // ...
}

next-js-image.tsx

import Image from 'next/image';
import type { RenderPhotoProps } from 'react-photo-album';

export default function NextJsImage({
  photo,
  imageProps: { alt, title, sizes, className, onClick },
  wrapperStyle,
}: RenderPhotoProps) {
  return (
    <div
      style={{ ...wrapperStyle }}
      className={
        'group relative cursor-pointer overflow-hidden rounded-2xl bg-black/[.5] ring-1 ring-primary hover:bg-black/0'
      }
      onClick={onClick}
    >
      <Image
        fill
        src={photo}
        placeholder={'blurDataURL' in photo ? 'blur' : undefined}
        {...{ alt, title, sizes }}
        className={'-z-10'}
      />

      <div
        className={'absolute inset-x-0 bottom-0 top-auto overflow-hidden p-2'}
      >
        <h3 className={'font-semibold'}>{photo.title}</h3>
      </div>
    </div>
  );
}

[igordanchenko]

Instead of positioning the image behind the semi-transparent div, I'd use a brightness filter to achieve a similar effect. The added bonus is that you no longer need to mess with the z-index and avoid corresponding side effects caused by that approach.

import Image from "next/image";
import type { RenderPhotoProps } from "react-photo-album";

export default function NextJsImage({
  photo,
  imageProps: { alt, title, sizes, className, onClick },
  wrapperStyle,
}: RenderPhotoProps) {
  return (
    <div
      style={wrapperStyle}
      className="relative rounded-2xl overflow-hidden brightness-50 hover:brightness-100 transition duration-300"
    >
      <Image
        fill
        src={photo}
        placeholder={"blurDataURL" in photo ? "blur" : undefined}
        {...{ alt, title, sizes, className, onClick }}
      />
    </div>
  );
}

Does this address your use case?

p.s. I'm going to move this question to react-photo-album discussions since your question appears to be related to PhotoAlbum rather than the Lightbox component.

[edwinvelez]

Thanks @igordanchenko! Your suggestion works as expected. Also, you are correct. This was more a PhotoAlbum question. Sorry for the mixup.