Skip to content
Submitted over 3 years ago

Mobile first design using Flex Box

Randy Kwalar•75
@RandyKdev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Here is my second solution here on Frontend Mentor, I would really appreciate reviews and answers to the questions below

  • What is the best or more preferable way of overlaying the color on the image?

  • Currently, I have used an empty div and put the image as a background-image of the div, then used the pseudo-element, after to put a semi-transparent element with the desired color. Is this best practice?

  • And also, I tried using the pseudo-element, after of an img tag, but it seemed to be absent. Do img tags not have pseudo-elements or is it covered by the image? i tried altering the z-index to no avail

  • How can an image be clipped from a parent element? for example, If an image is in a div, setting the border-radius on the div should also clip the image.

Thanks, I would really appreciate any answers or clues or pointers that can be given 😁.

Community feedback

  • Chamu•13,130
    @ChamuMutezvaPosted over 3 years ago

    i might be able to answer one or two of your questions.

    • for the overlay , see the following article on blend modes
    • an image does not have a pseudo element as it is considered an empty element. Elements that do not have a closing tag. Elements in the following format will have pseudo elements <element>blala</element>
    Marked as helpful
    1
    Randy Kwalar•75
    @RandyKdevPosted over 3 years ago

    @ChamuMutezva Thanks for the answers.

    I am just hearing of blend modes now, I will check it out.

    Ohh, it means br tags too don't have pseudo-elements.

    Thanks for that insight.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord