CSS hidden:overflow not working with absolute position?

Question

I have a circle with some <div> in it. I want to hide overflow of this <div> using overflow:hidden property.

This is the result:

As you can see, div is not hidden at all. However, after removing position:absolute from inner <div>, it looks like this:

Now, the <div> is properly cropped, but the outer <div> is now an ellipse rather than a circle.

How can I have a circle with properly cropped inner <div>?

My code:

.button-circle {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
  width: 100%;
  padding-bottom: 100%;
  background-image: url(http://placekitten.com/200/300);
  background-size: cover;
}
.button-circle div {
  width: 100%;
  position: absolute;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
}

<div class="button-circle">
  <div>
    <h3>Click me!</h3>
  </div>
</div>

You should know that border-radius has not needed prefixes for quite some time. — Rob
– Rob, Commented Apr 3, 2016 at 13:32

Teo Dragovic · Accepted Answer · 2016-04-03 13:27:07Z

3

Add position: relative to .button-circle

.button-circle {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
  width: 100%;
  padding-bottom: 100%;
  background-image: url(http://placekitten.com/200/300);
  background-size: cover;
  position: relative;
}
.button-circle div {
  width: 100%;
  position: absolute;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
}

<div class="button-circle">
  <div>
    <h3>Click me!</h3>
  </div>
</div>

answered Apr 3, 2016 at 13:27

Teo Dragovic

3,51822 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

John Slegers · Accepted Answer · 2016-04-03 13:36:11Z

There's two solutions for your problem, depending on whether you do or don't want absolute positioning for the inner <div>.

Without `position:abolute`

If you want it to work without position:abolute on your .button-circle div, you'll need to add float:left; to that selector and adjust the padding of your .button-circle :

.button-circle {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
  width: 100%;
  padding-bottom: 80%;
  background-image: url(http://placekitten.com/200/300);
  background-size: cover;
}
.button-circle div {
  width: 100%;
  float: left;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
}

<div class="button-circle">
  <div>
    <h3>Click me!</h3>
  </div>
</div>

(see also this Fiddle)

With `position:abolute`

If you want it to work with position:abolute on your .button-circle div, you'll need to add position: relative; to your .button-circle selector :

.button-circle {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
  width: 100%;
  padding-bottom: 100%;
  background-image: url(http://placekitten.com/200/300);
  background-size: cover;
  position: relative;
}
.button-circle div {
  width: 100%;
  position: absolute;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
}

<div class="button-circle">
  <div>
    <h3>Click me!</h3>
  </div>
</div>

(see also this Fiddle)

Collectives™ on Stack Overflow

CSS hidden:overflow not working with absolute position?

My code:

2 Answers 2

Comments

Without `position:abolute`

With `position:abolute`

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

My code:

2 Answers 2

Comments

Without position:abolute

With position:abolute

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Without `position:abolute`

With `position:abolute`