Flex, align and lots of divs

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Vlastimil, about the black block, you just need to put in an image rule as a sort of CSS reset because an image is an inline element. I suggest that you add a CSS reset from now on to all your projects. For this challenge, at the top of your code under the box-sizing rule, add these lines:

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }
  

  By the way, I probably wouldn't group the background color there under the * selector rules; just keep them as they should be without anything except the box-sizing property, and put the background color in the body selector where it normally goes.

  For the hover, try this in the HTML:

  <div class="hero_img">
     <img src="./images/image-equilibrium.jpg" alt="Equilibrium, a multicolor cube" />
     <div class="overlay">
        <img src="./images/icon-view.svg" alt="">
     </div>
  </div>
  

  And this in the CSS:

  .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: hsla(178deg, 100%, 50%, 0.5);
    opacity: 0;
    display: grid;
    place-content: center;
    transition: opacity 200ms ease-in-out;
  }
  .overlay img {
    width: 3rem;
    height: 2rem;
  }
  .overlay:hover {
    opacity: 1;
  }
  

  Hope this helps you out!

  Marked as helpful

  1

  ---

  

  Vlastimil Slechta•40

  @valCechPosted over 2 years ago

  Dear @elaineleung

  Thank you so much for your help. Now I understand what I was missing and LEARNT SOMETHING NEW! X

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Vlastimil, congratulations for your solution!

  Answering your question:

  The problem you've with the black background behind the icons is due the background-color inside the pseudo-elements, a better way to fix that is that you insert the icon with <img> instead of pseudo-elements, its a little bit too complex to manage. But if you want to keep the pseudo-element, just delete the background-color and the dark background to the body.

  *, *::before, *::after { box-sizing: border-box; /* background-color: hsl(217, 54%, 11%); */

  *, *::before, *::after { box-sizing: border-box; }

  Hope it helps, happy coding!

  Marked as helpful

  0