NFT preview card component

Hello @danniadelap!

Your solution looks excelent!

📌 To improve semantic clarity, opt for <h1> over <h2> for your main title.

It's more than just text size — it's about structuring your content effectively:

• <h1> to <h6> are used to define HTML headings, with <h1> being the most significant.
• Stick to one <h1> per page for the main title, and maintain the titles hierarchy with <h1>, <h2> <h3>, and so on.

While these adjustments might not alter the visual appearance much, they significantly enhance semantic clarity, SEO optimization, and accessibility.

📌 And about the hover effect, here's how I did it (I think yours is pretty good, but just in case you wanna see other ways to do it):

HTML

<img src="images/image-equilibrium.jpg" alt="Equilibrium" class="pic">
  <div class="icon">
    <img src="images/icon-view.svg" alt="icon-view" class="icon-view">
  </div>

CSS

.pic {
   width: 300px;
   background: url('images/icon-view.svg') center center no-repeat;
   background-color: $Cyan-hover;
   background-size: cover;
   margin: auto;
   border-radius: 10px;
}
.icon {
   display: grid;
   justify-content: center;
   align-items: center;
   position: absolute;
   opacity: 0;
   background-color: $Cyan-hover;
   width: 300px;
   height: 300px;
   border-radius: 10px;
}
icon:hover {
   opacity: .5;
   cursor: pointer;
}

Just don't forget to change the class names to match yours.

Hope these suggestions prove helpful! Keep up the great work!