Skip to content
OverviewSolutions
7
Comments
3
Akanni Feyisara
@Feyisara2306

All comments

  • Heitor Palazzi Oliveira•20
    @HPalazziSubmitted over 2 years ago

    Did not figure it out the hover image question, i tried overlaping the image in so many ways and did not get it in the end...

    NFT card

    1
    Akanni Feyisara•110
    @Feyisara2306Posted over 2 years ago

    Hello Heitor! well done on completing the challenge.

    As regard your question on image overlay hover effect, put the two images in a separate div and declare an empty div for the overlay, then style its container div with a position:relative; and a 100% width. Then display the images as a block, and the overlay div position: absolute; .

    Here is a snippet below...

    .image{ position: relative; width: 100%; }

    .image_img{ display: block; width: 100%; border-radius: 10px; }

    .image_overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 255, 247, 0.4); display: flex; align-items: center; justify-content: center; opacity: 0; border-radius: 10px; }

    I hope this helps.

    Good luck and happy coding!

    Marked as helpful
    1
  • Petru Banceanu•110
    @Petru14Submitted over 2 years ago

    The most difficult thing about the challenge was setting "text-align: center; " because I forgot about this property and I took me a while till I figured out.

    I'm not 100% sure if my seizes for margin and padding are correctly.

    The only questions I have are about how clean my code is and where I can improve.

    Thanks!

    Responsive layout using flex box.

    2
    Akanni Feyisara•110
    @Feyisara2306Posted over 2 years ago

    Well done Petru!

    I noticed the code isn't responsive at all. You can try using relative units(like vh, vw and percentages) as Joaquin pointed out.

    Also the page isn't centralized, I suggest adding a 100% height to the html and body.

    html, body{ height: 100%; }

    html{ display: table; margin: auto; }

    body{ display: table-cell; vertical-align: middle; }

    Marked as helpful
    2
  • Akanni Feyisara•110
    @Feyisara2306Posted over 2 years ago

    Well done! You have no issue at all. I just completed the same project but it isn't as perfect as yours. I've got some questions if you don't mind, how did you centralize the elements on the page? and also, the display I get on my browser when coding isn't the same as the one that shows with the live site url, I want to know what I'm doing wrong, Thanks.

    1