NFT Preview Card

What are you most proud of, and what would you do differently next time?

This project was review for me, but I don't overlook any of these simple projects since they are a good way to continue showing me how much I have improved, i.e., how long it takes me to code, whether I'm using good HTML semantics, whether I understand the fundamentals, etc.

However, hovering over the image, displaying a white background color, overlaying another picture, and adding a smooth transition is still relatively new. This led me to learn more about using an image wrapper to execute this hover image overlay.

What challenges did you encounter, and how did you overcome them?

--I learned how to be clearer when naming my classes. For example, this is my code before I rewrote it:

<main class="container">
  <article class="card">
    <div class="card-content">

      <div class="img-container">
        <img class="img-equil" src="./images/image-equilibrium.jpg" alt="equilibrium image">
        <img class="img-view" src="./images/icon-view.svg" alt="icon view">
      </div>
      <div class="content-text">
        <a class="number" href="#">
          <h1>Equilibrium 3429</h1>
        </a>
        <p class="pro-des">Our Equilibrium collection promotes balance and calm.</p>
        <section class="eth-days">
          <div class="price-container">
            <img class="img-eth" src="./images/icon-ethereum.svg" alt="ethereum">
            <p class="eth">0.041 ETH</p>
          </div>
          <div class="time-container">
            <img class="img-clock" src="./images/icon-clock.svg" alt="clock">
            <p class="time same-color">3 days left</p>
          </div>
        </section>
        <section class="jules">
          <img class="img-jules" src="./images/image-avatar.png" alt="avatar">
          <p><span class="same-color">Creation of</span><a class="name" href="#">Jules Wyvern</a></p>
      </div>
      </section>
    </div>
  </article>
</main>

...and this is my code after I revised it:

<main class="portfolio-container">
  <article class="nft-card">

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

    <div class="cards-details">
      <a class="card-title" href="#">
        <p></p>
      </a>
      <p class="card-description"></p>
      <section class="price-timer">
        <div class="price-info">
          <img class="ethereum-icon" src="./images/icon-ethereum.svg" alt="ethereum">
          <p class="eth-text"></p>
        </div>
        <div class="time-info">
          <img class="timer-icon" src="./images/icon-clock.svg" alt="clock">
          <p class="timer-text"></p>
        </div>
      </section>
      <section class="creator-info">
        <img class="creator-avatar" src="./images/image-avatar.png" alt="avatar">
        <p><span class="creator-label"></span> <a class="creator-name" href="#"></a></p>
    </div>
    </section>
  </article>
</main>

...as you can see, it is much more organized. I eliminated the redundancy and gave all the classes more precise and concise names.

Percentages vs. Pixels

-I also used percentages for the top, bottom, and transform since pixels fixed the size, which caused problems when shrinking the viewport. When I used percentages in properties like transform: translate(-10%, -10%), the values were calculated relative to the size of the element itself (in this case, the .view-icon). As the icon's size changes (for example, if it gets smaller due to a resizing viewport), the translation also scales accordingly. This maintains the intended visual position over the image.

For Example:

.nft-card {
 background-color: hsl(215, 59%, 21%);
 width: 400px;
 border-radius: 15px;
 padding: 30px 30px 5px 30px;
}


.img-wrapper {
 position: relative;
}

.nft-image {
 display: block;
 width: 100%;
 border-radius: 10px;
 transition: opacity 0.3s ease-in-out;
}

.view-icon {
 position: absolute;
 left: 45%;
 top: 45%; 
 opacity: 0;
 width: 45px; 
 height: 45px; 
 transition: opacity 0.2s ease-in-out, transform 0.3s ease-in-out;
 transform: translate(-5%, -5%); 
}

--Responsiveness with Percentages:

With percentages, if the icon’s size shrinks to maintain responsiveness (say from 45px down to 30px), using translate(-10%, -10%) means it will move 3px left and 3px up (because 10% of 30px = 3px). The centering effect remains visually intact.

Inconsistent with Pixels: --In contrast, if you used a fixed translate(-10px, -10px) while the icon size decreased, the icon might not stay visually centered. It would have a constant movement and may result in the icon appearing further from the center than intended.

Hovering Active State

I then moved on to the hover pseudo-class:

.img-wrapper:hover {
 background-color: white;
 border-radius: 11px;
}

.img-wrapper:hover .nft-image {
 opacity: 0.8;
}

.img-wrapper:hover .view-icon {
 opacity: 1;
 transform: scale(1.2);
}

So, I first added a background-color: white to give it a faded effect. I also added an 11px for the white background, not how from the corners, keeping it close to the same size as the .nft-image borders at 10px. I then needed to target the .nft-image and .view-icon; however, as I mentioned before since I wrapped them together within the. img-wrapper, I can then use .img-wrapper to trigger the hover effect. In other words, the .nft-image and .view-icon image will only trigger their effect when you go over the .img-wrapper, which covers the full width of the parent container.

What specific areas of your project would you like help with?

I will continue to work with the transition and transformation rules. This project was a good review, and I learn more about hover effects, transitions, and transformations.

I would appreciate any tips and advice regarding these rules, which are still relatively new.

Happy coding & Blessings to all