Skip to content

How to add fade effect with Tailwind CSS? #161

Answered by igordanchenko
edwinvelez asked this question in Q&A
Discussion options

You must be logged in to vote

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}

Replies: 1 comment 1 reply

Comment options

You must be logged in to vote
1 reply
@edwinvelez
Comment options

Answer selected by igordanchenko
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
2 participants