stats preview card component using flexbox

Community feedback

• 

  John Mirage•1,590

  @john-miragePosted over 1 year ago

  hello,

  To display the image on top on mobile and on the right on desktop, you can use flex, first simply put the image first in html then the text section so you have the image on top, then in desktop use flex to display the elements in a row and change the order of the elements with the order css property so the image is second and the text section is first.

  Marked as helpful

  2
• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋, regarding your questions:

  • The mix-blend-mode property specifies how an element's content should blend with its direct parent background. In this case you could apply it like this:

  .image {
  background-color: hsl(277, 64%, 61%);
  }
  
  .image img {
  mix-blend-mode: multiply;
  opacity: 0.75;
  }
  

  • To show different images depending on the device or screen size, the <picture> element is ideal:

  <picture>
  <source media="(min-width: x)" srcset="images/image-header-desktop.jpg">
  <img src="images/image-header-mobile.jpg" alt="">
  </picture>
  

  Please let me know if you want more info on any of these topics or disagree with something. I hope it’s useful 🙂

  Regards,

  Marked as helpful

  2
• 

  Mário Vergara•160

  @mvergara94Posted over 1 year ago

  Hello there! Nice Job! To add a color over the image ou can add a layer with some opacity with before. You only have to put the position relative in the container of the image then you can add this layer. Below the is what i used in my solution. Hope it would help.

  .image-wrapper {
  position: relative;
  grid-area: image;
  min-height: 240px;
  background-image: url(../images/image-header-mobile.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  }
  
  .image-wrapper::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: (the color you want) ;
  opacity: 55%;
  z-index: 1;
  filter: brightness(90%);
  }
  
  

  Marked as helpful

  1