How to correctly position an image above another image, without the originally set image's wrap-CodePudding

I am trying to position the icon in the bottom right corner of an image. There is a wrapper, where images with different sizes should fit. And there is an img-wrapper, that include image and icon.

The problem is that it requires to specify 100% height for the img-wrapper, which is also a parent block for an icon, so it turns out to be at the bottom of this block and not the image. img tag also doesn't support ::after pseudoelement.

Is there a way to position the icon correctly without bringing js?

Example: codepen.io/girich1/pen/YzrQaVw

CodePudding user response：

Sure, you'll just need 1 more little wrapper to hold the icon(s).

Add a <div > around both the img.icon lines:

  <div >
    <img  src="https://img.icons8.com/color/50/000000/verified-badge.png"/>
  </div>

Next, remove your current .icon { ... } section from your CSS. And add the following instead:

.imgicons {
  margin: 0; padding: 0;
  position: relative;
  text-align: right;
  top: -30px;
  padding-right: 10px;
}

.icon {
  width: 20px;
  height: 20px;
  margin: 0; padding: 0;
}

That should get you what you want if i understood it correctly.

(fyi: the icon is 20px; i presumed you'd want say a 10px padding compared to the bottom right corner, added together that makes 30px; which is what that -30px refers to)