Skip to content
OverviewSolutions
0
Comments
31

Fernando FeN

@Fernando0654Mexico City425 points

Love coding and writing △

I’m currently learning...

ASP NET

Latest solutions

No solutions submitted yet.

Latest comments

  • Fernando FeN•425
    @Fernando0654

    It's alright, everyone here we are learning and improving.

    First of all, you need to improve your CSS skills. Try to not use too many pexels, instead use vw, vh, rem and em. I see in your code you use height property with pexels, this isn't a good idea. There is plenty of articles and videos explaining how to use these

    If you want that the button show the pop-up menu, use the :hover state. It's not the same but it will allow to complete this challenge without JS

    Good luck and good coding 👍

  • Fernando FeN•425
    @Fernando0654

    Right now, as you have your css, replace this to your .img-container::before. You can do this by inspecting elements first to see it works fine

       content: " ";
    position: absolute;
    opacity: 1;
    background-image: url(./images/icon-view.svg);
    background-position: center;
    background-size: 20%;
    height: 100%;
    width: 90%;
    background-repeat: no-repeat;
    background-color: blue;
    border-radius: 10px;

    Of course, on background-color add the right color, I just wrote blue because I don't remember the color.

    Good luck, though

    Update: Don't forget to add space on content: " ", otherwise it won't work

    Marked as helpful
  • Fernando FeN•425
    @Fernando0654

    I recommend to you using a max-width property to avoid content gets too large. It looks too large on my desktop, Regarding to set content on the center, point 2, I use position: absolute and then top: 50% & left: 50% along with transform: translate(-50%, -50%). Of course, this only will work fine on desktop sizes. On mobile use something with margin: auto and it'll get done almost like magic.

    Also, I don't recommend using px with the padding property because it will create you troubles. Instead, use em so they'll get a better response on big and small screens.

    Regarding to your 1 point, hope you find the answer. What I did with this one was to work with a filter css property when hovering along with the svg eye.

    Good luck!

    Update: If you don't want to use position: absolute and then top: 50% & left: 50% along with transform: translate(-50%, -50%), you can do this to your main tag and it will work in your code to solve your problem:

    Get rid of the min-width: 100vw property

    Then write width: 90%, max-width: 500px and margin: auto and it should be work

  • Fernando FeN•425
    @Fernando0654

    The reason of your trouble is that top class is over the img, which has the hover state. So, it's not hovering because when you put the cursor over the img, actually you're hovering the top div and not the img

    Hope this can help you. Also, use a main tag to wrap the main content of the page. This will fix your accesibility issues

  • Fernando FeN•425
    @Fernando0654

    👋 It's not fitting well on my mobile device, the content is not center. I recommend to you using width: 95% along with max-width: *some value in px* and margin: auto on your main tag or wrapper

    Marked as helpful
  • Fernando FeN•425
    @Fernando0654

    👋 Heyo! It's positioned to the left on mobile device, also I don't recommend to use too many px on your css. This may be the cause of your error

    Hope this can help ♣︎

View more comments