Skip to content
OverviewSolutions
28
Comments
6
Joel
@JoelLH

All comments

  • Moscow•420
    @MOSCOW2022Submitted about 2 years ago

    hello guys so my only issue here is i didnt know how to make the hover effect on the image apear and the icon i try to do like : img:hover{ background-image:url('the url");} and i added the background to cyan but it didnt work if someone know how to implement it please tell me.

    thank you for the answers

    html css

    2
    Joel•590
    @JoelLHPosted about 2 years ago

    Hey good job! I did it this way:

    • created a div as child of the img div or sibling called overlay
    • add opacity 0 or display none also width 0 can work
    • add when hover over img turn opacity to 100 or display block or width 100%; that way when the user hover over the img the overlay will display with the icon in it. Im not sure if this is the best way to do it but it worked fine for me . Hope this helps!
    Marked as helpful
    1
  • Joel•590
    @JoelLHPosted about 2 years ago

    Hey Great Job!. For the images you can use a combination of min-width, max-width and width.

    • min-width : will set the minimum width u like your image to be example: 300px;

    -max- width: sets the maximum width example: 600px;

    • lastly width: 100% will let the image be as large as any pixels between 300px and 600px; Hope this helps, happy coding!
    Marked as helpful
    1
  • TomoFromEarth•20
    @TomoFromEarthSubmitted about 2 years ago

    From the images provided it seems to me that the width of the button dictates the width of all the text items, or at least the max width. I wasn't able to really get it to do that. I am happy with my layout, I think it is pretty close but it breaks because of the button lol. I can't help but feel like I am making these way more complicated than they need to be haha. HELP lol

    Product Preview Card Component using CSS

    2
    Joel•590
    @JoelLHPosted about 2 years ago

    Hey! looks great to me. A way around is to take the main text element and set the padding to that element, then set width: 100% to all of its children, that way all of the elements will be the same size and u wouldnt have to add a lot of padding to ur button. i hope this helps Great job! happy coding

    Marked as helpful
    0
  • Kipo•80
    @rezokipSubmitted over 2 years ago

    Another Challenge nearly done..

    Cannot find a way to fit the Image inside the parent on the desktop-version. Any help there?

    And maybe any tipps on writing cleaner code? I think i make things more complicated then it needs to...

    Appreciate any help.

    Thanks.

    stats-preview-card-component-main

    2
    Joel•590
    @JoelLHPosted over 2 years ago

    Hey there, for the image, what you can do its remove object fit and use height 100% that will make the image strech to the size of the parent Also you are using the image for mobile version there's another image for the desktop version that will fit better. It has to change when you move from mobile to desktop.

    Good job, happy coding

    Marked as helpful
    0
  • Joel•590
    @JoelLHPosted over 2 years ago

    Hello, overall looks great! Good job. I have a couple of issues with the live site tho:

    1. Did u use breakpoints for the container div? U can use width: 100% so u can get rid of the breakpoints and it will do a better job.

    2. Theres a wierd glicth going on with the img overlay it looks like its flickering, not sure if it is my computher

    Marked as helpful
    0
  • Joel•590
    @JoelLHPosted over 2 years ago

    Hey, u can use a Media Query, u can set rules that activate when a device screen gets to a specified width. You can learn more in this video: https://www.youtube.com/watch?v=yU7jJ3NbPdA. Good work, happy conding!

    Marked as helpful
    0