CODEWITHSUNDEEP
htmlcss
Kao
Kao

Reputation: 7364

CSS hidden:overflow not working with absolute position?

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:

enter image description here

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

enter image description here

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>

Upvotes: 0

Views: 139

Answers (2)

John Slegers
John Slegers

Reputation: 47081

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)

Upvotes: 1

Teo Dragovic
Teo Dragovic

Reputation: 3518

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>

Upvotes: 3

Related Questions