NFT single card component using flexbox

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;
        }

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.

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

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!