Stats preview card component - Responsive Design

Community feedback

• 

  JuvoGenesis👾•2,010

  @AkoToSiJeromeEhPosted over 1 year ago

  Hi! Great work out there! I just wanted to share how you can achieve an image color overlay using CSS properties like mix-blend-mode: multiply or background-blend-mode: multiply. Since you are not using the image as a background, mix-blend-mode: multiply is suitable. If you are new to this property, mix-blend-mode blends the background color of its parent element. As you can see in the main picture , I added a background and used mix-blend-mode on the main picture img , also in the (main div.text-div div.stats-div) I suggest to use d-grid with grid-template-colums : repeat(3,1fr) instead of d-flex in order to match the positioning in the design reference I hope this suggestion works and helps. Happy coding!(the bold text is the code i modify in your source code)

  main picture {

  position: relative;

  background-color: blueviolet;you can change this

  }

  main picture img {

  mix-blend-mode: multiply;

  opacity: 0.8;you can adjust this

  height: 100%;

  width: 100%;

  border-radius: 0px 10px 10px 0px;

  /* background-color: blueviolet; */

  }

  Marked as helpful

  1

  ---

  

  Aziz Berhouma•330

  @AziztheprogrammerPosted over 1 year ago

  @AkoToSiJeromeEh Thanks Men ! I Really Appreciate Your Effort to Help Me to Improve My Work and I Found That So Helpful and Amazing to Learn This Property, Because in Fact Idk It So I Was Supposed to Create an ::After Element So Thanks Bro for That and I Will Surely Use This Property in the Future and Thanks Again <3

  0