How to cut image with position:absolute that overflows outside its container/card

Question

SCROLL DOWN FOR AN UPDATE

ORIGINAL POST:

I'm making a card html code and I'd love to style it using an image cut at an angle. I've tried a bunch of things but nothing seems to hide the overflow of the image! This is the current situation:

the transparent circle is an imported png and I do not want the overflow bit to show (there should be the pink square only and nothing outside).

Current code of the whole card!

<div class="col-lg-9">
  <div class="card" style="
      margin-top: 80px; margin-bottom: 50px;
      background-color: #f25a7d; 
      min-height: 400px; max-height: 400px; 
      box-shadow:
        0 0 0 2px white,
        0 0 0 11px F79CB1;
      ">
      <!----------- pokeball decal ----------->
      <div style="flex-shrink: 0; height: 500px; width: 500px; opacity: 0.4; position: absolute; margin-top: -170px; margin-left: -160px">
        <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/94532125_ih8T8ykK5oGsXMd.png" style="transform: rotate(45deg); overflow: hidden;">
      </div>
      
    <p> test  text </p>
  </div>
</div>

I've tried placing the "overflow:hidden" in other places to no success. Ideally the decal should be on the dark pink square only, but I do not mind it going over the border as well. For now at least.

EDIT:

As of now, I changed the code to make the pokeball the background image of the card. I failed to mention before that this code can't use an external css file because of the webpage limitation (toyhouse only allows one unique html and inline css), therefore I can't use pseudo elements. I rotated the image of 45 degrees on paint, then edited the card as follows:

<div class="card" style="
    margin-top: 80px; margin-bottom: 50px;
    min-height: 400px; max-height: 400px;
    box-shadow:
      0 0 0 2px white,
      0 0 0 11px F79CB1;
    background-color: #f25a7d;
    background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/94536392_W6ciggvgXzG0QDq.png);
    background-repeat: no-repeat;
    background-size: 500px 500px;
    background-position: -170px -160px;
    ">

Opacity and rotation can't be applied on the pokeball only, since that is achievable with pseudo elements only. This is not really the solution I was looking for because of the restrictions, so I'm keeping the question open. I'd love for the original question to find another answer!

Answer 1

If you have an absolutely positioned image that overflows outside its container (e.g., a card), and you want to "cut" or clip the overflowing part, you can achieve this by applying the overflow: hidden; property to the container.

Steps to Clip the Overflowing Image:

1. Set the Container to overflow: hidden; This ensures that any content that exceeds the container's bounds is not visible.

2. Ensure Proper Positioning The container should have a defined position (e.g., relative) to establish a containing block for the absolutely positioned image.

Example HTML & CSS

<div class="card">
  <img class="image" src="your-image.jpg" alt="Sample Image" />
</div>

.card {
  position: relative; /* Establish a containing block */
  width: 300px;       /* Set container width */
  height: 200px;      /* Set container height */
  overflow: hidden;   /* Hide overflowing content */
  border: 1px solid #ccc; /* Optional styling */
}

.image {
  position: absolute; /* Position the image absolutely */
  top: -20px;         /* Adjust position */
  left: -20px;        /* Adjust position */
  width: 340px;       /* Image width larger than the container */
  height: 240px;      /* Image height larger than the container */
}

For Rounded Corners: Add border-radius to the container to create a clipping effect with rounded edges:

.card {
  border-radius: 10px;
  overflow: hidden;
}

For Dynamic Sizing: Use aspect-ratio for responsive designs:

.card {
  aspect-ratio: 3 / 2; /* Width to height ratio */
  overflow: hidden;
}

Answer 2

The answer by @jme11 is a good one, but wouldn’t it be simpler just to edit the pokeball decal in an image editor, applying the 45° rotation and 40% opacity?

Then use the edited decal as a background image, positioned as desired.

body {
  background: #888;
}

.card {
  margin: 4em auto 0;
  width: 80%;
  height: 400px;
  box-shadow: 0 0 0 2px white, 0 0 0 11px #F79CB1;
  background-color: #f25a7d; 
  background-image: url(https://donald.au/bugs/so-79374230.webp);
  background-repeat: no-repeat;
  background-position: -220px -220px;
}

<div class="card">
  <p> test  text </p>
</div>

Note that in this snippet I have put the style rules in CSS for neatness and clarity, but they will work just the same if they are declared using inline style.

Answer 3

Working within the constraints you stated for your platform, you could set the wrapping card's display property to grid and then you can use that grid to stack your content. Instead of removing the image from the flow of the page with position: absolute, you can set all of the card's direct children to the same grid area to stack them with grid-area: 1/1;.

html {
  color-scheme: dark; /* just to make the image overflow visible */
}

<div class="col-lg-9">
  <div class="card" style="
      display: grid;
      margin-top: 80px; 
      margin-bottom: 50px;
      background-color: #f25a7d; 
      min-height: 400px; 
      max-height: 400px; 
      box-shadow:
        0 0 0 2px white,
        0 0 0 11px F79CB1;
      ">
    <!----------- pokeball decal ----------->
    <div style="overflow: hidden; grid-area: 1/1;">
      <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/94532125_ih8T8ykK5oGsXMd.png" style="
      transform: rotate(45deg);      
      height: 500px; 
      width: 500px; 
      opacity: 0.4; 
      margin-top: -170px; 
      margin-left: -160px;
      ">
    </div>
    <!----------- card stacked content ----------->
    <div style="grid-area: 1/1;">
      <p>test text</p>
    </div>
  </div>
</div>