How to add fade effect with Tailwind CSS? #161
-
I have a NextJs project. The most important parts of my In As a workaround, rather than pass in the class via Since 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
'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 }}
/>
// ...
}
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>
);
} |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
Instead of positioning the image behind the semi-transparent 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 |
Beta Was this translation helpful? Give feedback.
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 thez-index
and avoid corresponding side effects caused by that approach.