Skip to content
OverviewSolutions
6
Comments
3
Karl Matthews
@karmatt

All comments

  • Karl Matthews•115
    @karmattPosted over 3 years ago

    There's multiple ways to change the image color, but the one I like is using the ::after pseudo element (less markup).

    What ::after does is place something immediately following the content of the element. So what you would do is for div that is wrapped around the image set it's position to relative.

    Then create another selector:

    div::after {

    content: "" content is required when adding the ::before and after:: pseudo elements, but can set it to empty string

    position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: purple }

    0
  • Carlos Guzman•285
    @guztrilloSubmitted over 3 years ago

    Second challenge from The Frontend Mentor. Once you know mix-blend-mode you feel unstopable. This time I use it to creat one button for the three categories, feels like magic!

    To make the button fully transparent, so it can show the background-color, you only need to set text color to black and mix-blend-mode to screen.

    3-column preview card solution using CSS Grid and one button for all

    1
    Karl Matthews•115
    @karmattPosted over 3 years ago

    Looks great! Thank you for the tip. By default the button text color is black, so unless you changed it, you just need to set mix-blend-mode to screen.

    Marked as helpful
    0
  • Marko Stanojevic•10
    @greardrearSubmitted over 3 years ago

    I couldn't figure out how to get rid off the containers white spaces around the content in smaller screens, if anyone has a solution please, do tell :)

    Pure Html and CSS

    2
    Karl Matthews•115
    @karmattPosted over 3 years ago

    So if I understand you correctly no want no white-space around the cards on mobile? You could add:

    • { padding: 0; margin: 0; }

    That selects all the elements and removes any default padding or margin that is on certain elements by default.

    0