Skip to content
OverviewSolutions
5
Comments
3
tomas
@ttoomas

All comments

  • antonio_p•40
    @purplejragonSubmitted almost 3 years ago

    How do you center the text next to the logos? I added some padding to the top to fake it, but I want to know how to actually center the text vertically. vertical-align: middle; and vertical-align: center; don't seem to work.

    Just plain HTML and CSS

    2
    tomas•150
    @ttoomasPosted almost 3 years ago

    Hi, great job on this site!

    You can center the text next to the logo using the flexbox: .avatar-text {display: flex; align-items: center} align-items

    Otherwise, I recommend trying the following for the background image: Create a parent <button> that will have position: relative. Then create a pseudo-element :: before for this button, which will have content: url ("picture") position: absolute, opacity: 0 and center it with display: flex (picture view) . Then add only <img> to <button>. Then you do button:hover::before and add opacity: 1. I hope my advice helped.

    Marked as helpful
    1
  • Ines Riahi•110
    @inesriahiSubmitted about 3 years ago

    Hi, I have implemented the hovering effect over the image using another div that changes its opacity when the link hovers. However, I think that this is not the best way to do this, maybe using pseudo-elements is better. I tried to implement this but the ::after element is not displayed.

    Please tell me some advice regarding this.

    Also, when the image hovers, you may notice a bar under the image that is covered by the overlay. I don't know why it is showing although I am setting all the margins and paddings to 0.

    I appreciate your help, Thank you in advance

    NFT Card Component

    2
    tomas•150
    @ttoomasPosted about 3 years ago

    Hi. I write in advance, I'm not an expert, I don't know if it's right, but you can try it.

    Create a parent <button> that will have position: relative. Then create a pseudo-element :: before for this button, which will have content: url ("picture") position: absolute, opacity: 0 and center it with display: flex (picture view) . Then add only <img> to <button>. Then you do button:hover::before and add opacity: 1.

    I hope my advice helped!

    Marked as helpful
    1
  • tomas•150
    @ttoomasSubmitted about 3 years ago

    This is my third challenge from a frontend mentor. This challenge was really simple! Even without figma files, I tried to mimic the look of the card as much as possible.

    NFT preview card component challenge

    3
    tomas•150
    @ttoomasPosted about 3 years ago

    In the last edit, I noticed that when I hover over the text " Jules Wyvern "is not just to change the color of the text, but to add a border around the image. Using a simple Js, I added an" active "class as I hover over the text, which simply adds a border around the image. I was just wondering, could it be done without js, using :hover?

    0