how to hide css content from overflowing

Question

how will i hide css content from overflowing..I want to display price tag in that css element but it is coming out of my card.

.content{
    content:'';
    position: absolute;
    left: 309px;
    top: 206px;
    z-index: 1;
    border-radius: 100%;
    width: 160px;
    height: 160px;
    //overflow: hidden;
    //display: block;
    background: rgba(0,0,0,.5)
}

<div class="row">
  <div class="col s12 l4">
    <div class="card">
      <div class="card-image">
        <img src="http://lorempixel.com/300/400" style="height: 300px;width: 418px;">
        <div class="content">
        </div>
      </div>
    </div>
  </div>

A screenshot would be helpful, what you are saying is an element is breaking the box model, correct. ( ie. it's sticking outside the confines of a parent element) — ArtisticPhoenix, Feb 02 '18 at 08:03
`//overflow: hidden`, `//` is not a comment in CSS (or in HTML, for that matter). This is just a syntax error. — Jeremy Thille, Feb 02 '18 at 08:03
@JeremyThille - good catch, I would add a CSS comment is `/* */` like a block comment. — ArtisticPhoenix, Feb 02 '18 at 08:04
Use `/* My comment */` in css to comment something out. Use `` in html to comment something out. Use `// My comment` in php to comment something. — Jeremy, Feb 02 '18 at 08:06
lol i know that i added that comment line just to show that i tried using that but it did not work... — aakanksha khandelwal, Feb 02 '18 at 08:43

score 2 · Answer 1 · answered Feb 02 '18 at 08:12

2

The overflowing div has a position:absolute. So you have to set its direct parent (.card-image) a position:relative so it "catches" the absolutely positioned div as a child.

Then apply overflow: hidden to the container.

.card-image {
   position: relative;
   overflow: hidden;
   width: 418px;
   height : 300px;
}

<div class="row">
  <div class="col s12 l4">
    <div class="card">
      <div class="card-image">
        <img src="assets/img/jonatan-pie-415847.jpg" style="height: 300px;width: 418px;">
        <div style="content:'';
                  position: absolute;
                  left: 309px;
                  top: 206px;
                  z-index: 1;
                  border-radius: 100%;
                  width: 160px;
                  height: 160px;
                  background: rgba(0,0,0,.5);">
        </div>
      </div>
    </div>
  </div>

answered Feb 02 '18 at 08:12

Jeremy Thille

26,047
12
43
63

This is the right answer, just wanted to say that :) – Jeremy Feb 02 '18 at 08:16
Thank you Jeremy. It feels like I'm complimenting myself :) – Jeremy Thille Feb 02 '18 at 08:16
Thank you jeremy.. will surely contact you for more doubts :D @JeremyThille – aakanksha khandelwal Feb 02 '18 at 08:38
Well that's another question altogether. If my answer to this question is satisfying, please consider validating and upvoting it. – Jeremy Thille Feb 02 '18 at 09:47
...then please consider validating and upvoting it. Like, manually validating and upvoting it. – Jeremy Thille Feb 02 '18 at 10:31
actually i dont know how to do that...lol ! this is my first post in stackoverflow – aakanksha khandelwal Feb 02 '18 at 10:36

score 0 · Answer 2 · answered Feb 02 '18 at 08:02

 <div class="row">
  <div class="col s12 l4">
    <div class="card">
      <div class="card-image">
        <img src="assets/img/jonatan-pie-415847.jpg" style="height: 300px;width: 418px;">
        <div style="content:'';
                  position: absolute;
                  left: 309px;
                  top: 206px;
                  z-index: 1;
                  border-radius: 100%;
                  width: 160px;
                  height: 160px;
                  overflow: hidden;
                  display:block
                  background: rgba(0,0,0,.5);">
        </div>
      </div>
    </div>
  </div>

I think you miss the point of the question as well `I want to display price tag in that css element but it is coming out of my card.` — ArtisticPhoenix, Feb 02 '18 at 08:05

ArtisticPhoenix · Accepted Answer · 2018-02-02T08:32:31.803

0

<div class="row">
  <div class="col s12 l4">
    <div class="card">
      <div class="card-image" style="position:relative; overflow:hidden;height: 300px;width: 418px;">
        <img src="assets/img/jonatan-pie-415847.jpg" style="height: 300px;width: 418px;">
        <div style="content:'';
                  position: absolute;
                  left: 309px;
                  top: 206px;
                  z-index: 1;
                  border-radius: 100%;
                  width: 160px;
                  height: 160px;
                  background: rgba(0,0,0,.5);">
        </div>
      </div>
    </div>
  </div>

Not sure if this is what you want. One important thing is to have card-image positioned relative, then you can use that as a reference point instead of the window. Then this has to have the overflow applied to it to hide the content, as it's the container the content is in.

Your image is broken for me and it's not clear exactly what or where you want it.

It would probably be better to use the card-image with a background image and then add the circle as normal content inside of it.

.card-image{
    background-repeat: no-repeat;
    background-size: cover;
    position:relative;
    overflow:hidden;
    height: 300px;
    width: 418px; 
}

.price-wrapper{
    position: absolute;
    box-sizing: border-box;
    left: 309px;
    top: 206px;
    border-radius: 100%;
    width: 160px;
    height: 160px;
    background: rgba(0,0,0,.5);
    padding: 50px;
    color: #FFF;
}

<div class="row">
      <div class="col s12 l4">
        <div class="card">
          <div class="card-image" style="background-image: url('assets/img/jonatan-pie-415847.jpg')" >
            <div class="price-wrapper" >
                      $9.99
            </div>
          </div>
        </div>
      </div>

This will give you a bit more control over the content inside of the circle. I left the background image as an inline style, this way you can change it with like PHP code or what have you.

I threw a bit of "flair" in to it so I could put an actual price value you in there, not sure if you need that, but I added box-sizing and color for it.

Just a thought.

edited Feb 02 '18 at 08:32

answered Feb 02 '18 at 08:12

ArtisticPhoenix

21,464
2
24
38

Which part, the second one? call it academic curiosity. – ArtisticPhoenix Feb 02 '18 at 08:46
yes ! but i want it to be responsive...and the image should fit into card size – aakanksha khandelwal Feb 02 '18 at 08:58
is to possible to do that without using background image ??? because i already have a card ready i just want a code for that price and black background with opacity – aakanksha khandelwal Feb 02 '18 at 09:00
with `background-size: cover;` means `cover:Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges` see https://www.w3schools.com/cssref/css3_pr_background-size.asp – ArtisticPhoenix Feb 02 '18 at 09:09
You can also use `contain` which is `Resize the background image to make sure the image is fully visible` but it wont stretch the image. By leafing it as a inline style you can do `
`
– ArtisticPhoenix Feb 02 '18 at 09:10
Actually the scene is.. i already have a page ready i just want to put that price part in that page in all my cards...so i will have to do aloot of changes if i use this... – aakanksha khandelwal Feb 02 '18 at 09:32
and that page was not made by me there are 4-5 people working on same project :D – aakanksha khandelwal Feb 02 '18 at 09:33
well if you have to put text in that circle, it's going to be extremely difficult. Things work better if you use them how they are supposed to be used, if it's a background image, then it's a background image. – ArtisticPhoenix Feb 02 '18 at 09:34
hey i tried it with your code...it worked ! but now how will i make it responsive???any suggestion.. – aakanksha khandelwal Feb 02 '18 at 10:31

how to hide css content from overflowing

3 Answers3