Stats preview card component

Community feedback

• 

  Adriano•38,390

  @AdrianoEscarabotePosted almost 2 years ago

  Hi Renee Smith, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

  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

  Images must have alt text unless it is a decorative image, for any decorative image each IMG tag must have empty alt="" and add aria-hidden="true" attributes to make all the assistive technologies of the Web, as screen reader. Learn the differences between decorative/meaningless images vs important content.

  The rest is great!

  I hope it helps... 👍

  0
• 

  yishak abrham•2,150

  @yishak621Posted almost 2 years ago

  To create an overlay color u can use two methods one is by blend mode or the other using psudoelments after ....so in the blend mode add the image as a background color and the background color then mix them using blend mode multiply (there are other values but these one is closer to a design)....

  .container picture { 
     background-image: url(/images/image-header-mobile.jpg); 
     background-color: hsl(277deg, 64%, 61%); 
     background-repeat: no-repeat; 
     background-size: cover; 
     background-blend-mode: multiply; 
   }
  

  and also the long way psudoelments adding the color as after element

    //we can also do it this way 
     // picture::after { 
     //   content: ''; 
     //   display: block; 
     //   width: 100%; 
     //   height: 100%; 
     //   background-color: $color-soft-violet; 
     //   position: absolute; 
     //   top: 0; 
     //   left: 0; 
     //   opacity: 0.45; 
     //   filter: brightness(80%); 
     //   filter: contrast(180%); 
     // }
  

  0

  ---

  

  Renee Smith•190

  @RSmith484Posted almost 2 years ago

  @yishak621 thanks, what would be the HTML for this? I have included the image in the HTML and when i remove it and add it to the CSS it disappears.

  0

  

  yishak abrham•2,150

  @yishak621Posted almost 2 years ago

  @RSmith484 use the first blend method its easy and efficient ...and in the html use picture element

      <main> 
         <section> 
           <div class="container" data-aos="flip-up"> 
             <picture> 
               
             </picture>
  

  ...dont forget that the image is added as a background image so for the pc version add a media query with diffrent background image

  0