CODEWITHSUNDEEP
cssuser-interfacehovertailwind-css
Flo
Flo

Reputation: 129

how to add gradient transition to my image (not background) on hover using tailwind

i want to put gradient color of #323232 (0% on the top and 90% on the bottom) on IMAGE hover but instead i only changed its bg. i tried to change the opacity & change the color but it's still a solid color not gradient.

this is my code

<Layout>
      <Container>
        <div className="grid grid-cols-3 px-{100}">
          {gallery.map((el, i) => {
            return (
              <img className="transition duration-500 transition-all hover:bg-primary-hover hover:opacity-10 delay-100" src={gallery[i].imgSrc} />
            )
          })}
        </div>
      </Container>
    </Layout>

this is how i wanted it to be: click here

Upvotes: 0

Views: 2782

Answers (1)

MagnusEffect
MagnusEffect

Reputation: 3905

You can add the image hover by placing a div below the image and applying the gradient to this div, then on hovering the image, you can change the opacity of image.

I had put black and white color, however you use your choice of colour.

Below is the code,

    <script src="https://cdn.tailwindcss.com"></script>

    <div class="relative mix-blend-overlay">
      <img src="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back05.jpg" alt="BannerImage" class="absolute h-[70vh] lg:h-[80vh] w-full object-cover object-right hover:opacity-50 " />
      <div class="absolute -z-10 bg-gradient-to-t from-white via-gray-900 to-black h-[70vh] lg:h-[80vh] w-full" />

    </div>

Upvotes: 1

Related Questions