NFT single card component using flexbox

Community feedback

• 

  Jonah Ssegawa•240

  @devjhexPosted over 1 year ago

  A suggestion regarding your code that could be of interest to you to get the hover effect on the image to work:

  First of all, we need to have an element that will overlay the image element.

  • To do this you may need to create a div element inside the the image container that contains the icon

  <div class="nftimagecontainer">
          <img
            class="nftimage"
            src="images/image-equilibrium.jpg"
            alt="Equilibrium"
          />
           <div class="imageOverlay">
             <img src="/*location of the icon*/"/>
            </div>
        </div>
  

  Second, we need to make the newly created div be located in the same position as the image and give it the (light blue) color.

  • To do this, you need to give the new div a position of absolute and its image container a position of relative so that the new div can be put anywhere in the image container

  .nftImageContainer{
      position:relative;
  }
  .imageOverlay{
          position:absolute;
          background-color:/*the color you want (use rgba or hsla to give the color a little opacity e.g (rgba (0, 255, 247,0.6)*/ 
          /*styles to make the div in the same position as the image*/
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
         /*this is to give the div the same border radius as the image (to make it look the same */
          border-radius: /*Same border radius as the image*/;
   }
         /*this should also be done to position the icon in the middle*/
  .icon-view{
          /*the absolute value should also be put on the icon too*/
           position: absolute;
           left: 50%;
           top: 50%;
           transform: translate(-50%, -50%);
      }
  /*then make the overlay disappear by adding this style to the imageOverlay styles*/
  .imageOverlay{
              .....
              ......(other styles written previously)
             display:none;
  }
  

  Lastly make the imageOverlay element show when the image has been hovered over

  .nftImageContainer:hover .imgOverlay{
              display: block;
          }
  

  Marked as helpful

  1

  ---

  

  Apah•280

  @apah-devPosted over 1 year ago

  @Dev-Jhex You're the best!! The way you took the time to look through the code and give a solution that doesn't affect the other parts of the code is something else. Thank you so much! I've been finding some difficulties properly understanding position and its use to stack elements on top each other. I'll have to do more research on it. I wish i could reach out to you somehow for a discussion. Great help really

  1

  

  Jonah Ssegawa•240

  @devjhexPosted over 1 year ago

  @apah-dev You've done a great job pulling up the consistency in practicing these challenges, Well done!! We can chat more actually from here or any of the social media platforms, Check my profile on this platform so as to get my handles and again keep up with the code because you have a a great journey ahead

  0
• 

  Ed-dyb Abdelilah•1,560

  @eddybproPosted over 1 year ago

  Hi, Apah

  You did a nice job.

  For the background color it is a little bit tricky, I also notice that the icon-view in the center does not appear when you hover over the image , here a way to do it:

  • HTML code:

  <div class="nftimagecontainer">
          <img
            class="view"
            src="images/icon-view.svg"
            alt="view"
          />
        </div>
  

  • CSS code

  .nftimagecontainer{
      height: 300px;
      background: url('images/image-equilibrium.jpg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      margin-bottom: 1rem;
      border-radius: 10px;
  }
  
  .view{
      display: none;
  }
  
  .nftimagecontainer:hover{
      box-shadow: inset  0  0  0 1000px  hsl(178, 100%, 50%);
  }
  
  .nftimagecontainer:hover .view{
       display: block;
  }
  

  Tip :when you name classes, you can use hyphens to separate words that makes it more readable.

  so instead of : nftimagecontainer. you can use :nft-image-container.

  Happy coding.

  Marked as helpful

  1

  ---

  

  Apah•280

  @apah-devPosted over 1 year ago

  @eddybpro Can't say how grateful I am for this. Thank you for taking the time. I'll go through the code again and implement the corrections where necessary.

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  To center the main on the page using flexbox only instead flexbox and margin, add min-height:100vh to the body and remove the margin value in the main.

  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  For a responsive content, replace the width in the main with max-width.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  You firgot to add the image hover effect to the design.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1

  ---

  

  Apah•280

  @apah-devPosted over 1 year ago

  @Hassiai Thank you so much! I've been following Kevin Powell for a while now and his tutorials are just something else. Thanks for the video recommendation. I'll definitely check it out.

  0
• 

  Josh•1,110

  @josh76543210Posted over 1 year ago

  Hi @apah-dev,

  Yes, the image hover effects on this challenge can be quite tricky.

  Here is a possible approach to this problem:

  First the html:

  Add two more elements inside your nftimagecontainer:

  1. a div with the class of img-filter (this is for the cyan background-color)
  2. an img with the class of view-icon (this is for the eye image)

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

  Now the css:

  Add a position of relative and an overflow of hidden to the nftimageconatainer so you can place these new elements inside the container:

  .nftimagecontainer {
    position: relative;
    overflow: hidden;
  }
  

  Style the img-filter:

  .img-filter {
    background-color: hsla(178, 100%, 50%, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
  }
  

  Style the view-icon:

  .view-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
  }
  

  Style the hover effect to display these elements on hover:

  .nftimagecontainer:hover .view-icon,
  .nftimagecontainer:hover .img-filter {
    display: block;
  }
  

  QUICK NOTE: You can just add the border-radius to the nftimagecontainer because of the overflow of hidden we added earlier. Just make sure the nftimage takes up 100% of the container.

  I hope this helps you get an idea of how to proceed.

  Happy coding!

  0

  ---

  

  Apah•280

  @apah-devPosted over 1 year ago

  @josh76543210 Thank you Josh for this step by step process. You guys have been so helpful. I'll go through each code and also learn/read about what i do not entirely understand. Thanks once again!

  0