Stats preview card component

Community feedback

• 

  Adriano•38,060

  @AdrianoEscarabotePosted almost 2 years ago

  Hello Reza Jaber, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

  To get closer to the photo overlay effect, you'd better use mix-blend-mode. All you need is the div under the image with this background color: hsl(277, 64%, 61%); and position mix-blend-mode: multiply and opacity: 80% on the image or apply image to activate the overlay by blending the image with the div's color. See the code below:

  img {
      mix-blend mode: multiply;
      opacity: 80%;
  }
  

  You can read this content which is explaining these effects with mix-blend-mode: click here

  To improve the structure of the html document, prefer to wrap all the content with the main tag, since this challenge is just a component, it needs a main tag to know what the main content of the page is!

  The remainder is excellent.

  I hope it's useful. 👍

  Marked as helpful

  0
• 

  Abdullah Ayoola•1,080

  @abdullah43577Posted almost 2 years ago

  Hello there,

  You did a very great job as a beginner taking on this challenge.

  I'd be glad to share with you some little info that might help you finish this project just in time. What you've done so far is outstanding for a learner (as you've told me).

  First of all, you don't need to use the URL() for that hover effect. Create a div element and then make sure the div overlay over the image you want that hover effect to take effect upon. Then set the z-index to -1; it goes back behind the previous image there. So on hover of the main image. Set the image z-index property to -1 or -2 depending on the one you want to be ahead of the other.

  Your HTML looks structured well so far that I can tell.

  The way you also centred the element is very much valid. You can also use

  display: grid;
  place-content: centre; // this does the same job as the flexbox command you used
  
  

  So far that's all I can point out in this project

  I hope you understand this better than I wrote it. Keep coding, you're one step away from achieving your goal

  Marked as helpful

  0

  ---

  

  Reza Jaber•200

  @rezajaberPosted almost 2 years ago

  @abdullah43577 Hey Abdullah, I hope you are doing well :) I want to thank you! Your explanation was so good, that I just thought "why didn't I come up with this idea myself?" I will try it just know!

  Thanks for helping me out, I really appreciate it! Have a great day🔥

  0
• 

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  Hey, for the image, I did something like this, I hope that helps:

  <div class="image-container">
  img class="main-image" src="images/image-header-mobile.jpg" alt="">
  </div>
  
  .image-container {
    display: inherit;
    position: relative;
    width: 100%;
    border-radius: 0 10px 10px 0;
    background-color: hsl(277, 64%, 61%);
  }
  .main-image {
    width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
    border-radius: 0 10px 10px 0;
    mix-blend-mode: multiply;
    opacity: 0.75;
  }
  
  

  IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩

  0