CODEWITHSUNDEEP
htmlcss
Prachi Verma
Prachi Verma

Reputation: 101

Cropping an HTML element

enter image description here

This is how it looks now, I want to remove the blue strip which is falling out of the image. I have a circular image, created with img tag. I want a small banner over the image in the lower half of the cirle. I am getting stuck in cropping the overflowing span element from the image.

.image {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  border: 2px solid #527e35;
  box-shadow: 2px 2px 5px #c8e1b7;
}
.flap {
  position: absolute;
  top: 170px;
  width: 150px;
  margin-left: 0PX;
  padding-left: 20px;
  background: rgba(0, 0, 255, .4);
}
    <div name="image" style="float:right; padding-right:50px;margin-bottom:100px;">
      <span class="flap">keyword </span>
      <img src="content/baby.jpg" alt="baby" class="image">
<span class="flap">keyword </span>
      <img src="content/baby.jpg" alt="baby" class="image">
<span class="flap">keyword </span>
      <img src="content/baby.jpg" alt="baby" class="image">    
    </div>

With this, I have achieved the circular image with a thin strip with some text on it. I want to remove the overflowing strip. Any help or guidance is highly appreciated.

Upvotes: 0

Views: 521

Answers (1)

Paulie_D
Paulie_D

Reputation: 114990

It's because you haven't used overflow:hidden on the wrapper and secondly, because you are using name="image" instead of class="image".

Also, the wrapper needs to have position:relative.

.image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid #527e35;
  box-shadow: 2px 2px 5px #c8e1b7;
  overflow: hidden;
  position: relative;
}

.flap {
  position: absolute;
  top: 170px;
  left: 0;
  z-index: 1;
  width: 200px;
  text-align: center;
  background: rgba(0, 0, 255, .8);
  color:white
}

img {
  display: block;
}
<div class="image">
  <span class="flap">Our Man Phil</span>
  <img src="http://www.fillmurray.com/200/200" alt="baby" class="image">
</div>

Upvotes: 2

Related Questions