Skip to content
Submitted almost 2 years ago

NFT Preview Card with Tailwind

Revin•280
@revin212
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello, this is my first time using Tailwind CSS

I had a difficulty on making hover effect for the overlay image, I tried using class="hover:last:opacity-100" on the image container, but it doesn't work. So, I write the hover effect code on normal css

If you know how to do it with Tailwind, please let me know

Community feedback

  • Nikola D•1,510
    @NikolaD93Posted almost 2 years ago

    Hello there! 👋

    Congrats for completing the challenge! 🙌

    I have 2 suggestions for you:

    1.Make sure to write some description of an image in the alt attribute. 👇

    https://www.w3schools.com/tags/att_img_alt.asp

    2.For the opacity on hover just put this in the image tag. 👇

    class="hover:opacity-100"

    Hope this was helpful for you, and you find it usefull. 🙏

    Have a nice one! 🎉✌

    Marked as helpful
    1
    Revin•280
    @revin212Posted almost 2 years ago

    @Nikola1232456 Thanks for the feedback, the hover effect is worked!

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord