Question about the border-radius difference bt container & image

@vanzasetia

Hi Vanza, thanks a lot! I just came back from a vacation, I'll check your advice in details and see if there's anything that I don't understand. So far by taking a quick look, I already learned a lot!

@vanzasetia Hi Vanza, I had some struggle on the pseudo element part. I tried to add ::before with property bg-color, ::after with property bg-img (both with content: '') , but they look like a dot on the page. It seems like I cannot add width & height to them (because they are inline element according to devtool), I add hover effect and even z-index yet still failed. There must be something that I cannot figure it out. Could you provide more suggestions on it when you're available? Much appreciate it! Have a good day!

All other suggestions I've applied, and help a lot! Thanks!

@LJBL22

I looked a lot at the updated solution and don't see any pseudo-elements on the <a>. The :hover should be on the <a> not on the <div class="card-img-container">.

You don't need that <div> and icon-view.svg as an <img> element.

For the pseudo-element, you just need one pseudo-element from the <a> that wraps the image-equilibrium.jpg. After, that you make the pseudo-element fill the entire image using absolute positioning.

When I was creating the overlay, I made the <a> tag a block element. Doing that would make the pseudo-element respond to the width and height properties.

I didn't need z-index property when I was creating the overlay. The pseudo-element is already positioned above the image.

@vanzasetia

Thanks for your reply, please see my code again. I tried several ways:

-- Way 1 pseudo element doing nothing, eye image was under the bg-color (so it doesn't show as white as it should be)

.main-img-container {
  position: relative;
  display: block;
  background-color: var(--cyan);
  background-image: url(./images/icon-view.svg);
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
  overflow: hidden;
}

/* .main-img-container::before {
  content: "";
  display: block;
  background-image: url(./images/image-equilibrium.jpg);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  object-fit: cover;
} */

.main-img-container:hover .cube {
  opacity: 0.5;
}

.main-img-container:hover .main-img-container::before {
  opacity: 1;
}

<a href="#" class="main-img-container">
        <img
          class="cube"
          src="./images/image-equilibrium.jpg"
          alt="NFT cube pic"
        />
      </a>

-- Way 2 following the first, release the pseudo element comments, then comment the <img class="cube"> => all main pic gone

-- Way 3 bg-color & eye image doesn't show up, only the cube pic opacity: 0.5 happened

.main-img-container {
  position: relative;
  display: block;
}

.main-img-container::before {
  content: "";
  display: block;
  background-color: var(--cyan);
  background-image: url(./images/icon-view.svg);
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
  overflow: hidden;
}

.main-img-container:hover .cube {
  opacity: 0.5;
}

.main-img-container:hover .main-img-container::before {
  opacity: 1;
}

For the way 1 & 3, I also update commit on my github, thank you!

Also, even if I change ::before to ::after, nothing happened > <

@LJBL22

You are almost there to create the overlay. I made some changes in my developer tool to make the overlay show up properly.

.main-img-container::before {
  content: "";
  display: block;

  /* Use hsla color format to control the opacity of the
      color */
  background-color: hsl(178, 100%, 50%, 0.5);

  background-image: url(./images/icon-view.svg);
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
  overflow: hidden;

  /* Added code */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Remove the "opacity" property */
.main-img-container:hover .cube {
  /* opacity: 0.5; */
}

Setting display: block on the pseudo-element will not make it fill the entire space. You need to use absolute positioning to make it cover the image.

@vanzasetia Hi Vanza,

I found a new problem, looks like this line of my code doesn't work. .main-img-container:hover .main-img-container::before { opacity: 1; } Is it because the pseudo element?

Also, I tried what you suggest, yet there's no hover effect, the pic of view & cyan hsla background are just right over the cube pic. Not sure how to do now ^^"

@LJBL22

To select the pseudo-element on hover, you should do .main-img-container:hover::before.

@vanzasetia Thank you so much Vanza! I finally figure it out! I've put you in my README acknowledgement! Happy coding!

@LJBL22

That's good to know. Congrats! 🎉

Great job on taking some time to write what you have learned in the README. 👏

Thank you for putting my name on the README. I appreciate it. 😄

@Hassiai

Hi Hassia

Thanks for your reply! I wonder why I need to add another 100vh to body since I gave it 100% already. Also , I was thinking by giving the ‘main’ height and width I can fix the card size first, while what you suggest is by giving 100vh and the latter on CSS setting, it will naturally be the same result? If I misunderstood, please let me know. Thanks!

@LJBL22 the min-height: 100vh is to help center the main on the help within a minimum height of 100vh so that the main can be centered on the page if its height is above the min-height.

Givin the main a height value will make the content overflow when the screen is resize, at times using the height is not a good practice such as in responsive design. the padding-top and bottom value can replace the height.

Hope am helpful