Question 211231 in Html Question posted in
Some basic documentation can be found here.

Html – Why is the hover effect not working[Tailwind CSS]

HTML CODE

<div class="flex justify-center"><p class="font-bold text-[58px]">Title</p></div>
        <div class="grid grid-flow-row row-span-4 gap-[90px] mt-10">
            <div class="grid grid-flow-col col-span-2">
                <a href="#"><img class="h-[235px] w-[395px] bg-slate-50 rounded-[30px] relative left-[80px] border-2 border-black hover:rboxshad" src="./images/sz2.png" alt="img-sz"></a>
                <div class="h-[145px] w-[650px] rounded-[30px] relative top-[90px] right-[225px] bg-[#F0F0E1] border-2 border-black -z-20"></div>
            </div>
            ...
        </div>

CUSTOM CSS

.rboxshad{
    box-shadow: 8px 8px black;
}

Why can’t i see the shadows for this image?

I’m trying to create a box containing an image with the neubrutalist aesthetic so that when the cursor is hovered over the image the shadow becomes visible, but the hover effect doesnt seem to work. the shadow is perfectly visible without using hover: so theres no problem with the .rboxshad class. what is possibly wrong here?

Tags:

2

Answers


  1. 0

    I read your question you can find your answer here, good luck.
    Trying to apply hover: to a Tailwind CSS custom-class I made, but it doesn't seems to work

    Login or Signup to reply.
  2. 0
    1. Custom Tailwind Utilities

    Keep class hover:rboxshad

    https://play.tailwindcss.com/V6m0guIaPb?file=css

    @layer utilities {
  .rboxshad{
      box-shadow: 8px 8px black;
  }
}
    1. Only use css :hover

    Change class hover:rboxshad to rboxshad

    https://play.tailwindcss.com/wzTndV9Lr2

    .rboxshad:hover {
  box-shadow: 8px 8px black;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search