Html Question posted in
Some basic documentation can be found here.

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

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:
enter image description here

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!

Tags:

2

Answers


  1. 0

    Add overflow:clip;position:relative to the card.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search