Seek bar over an image with border radius

user_15493834 0
Viewed 114

I want to set a seek bar over an image like below attached image, tried some trick but it's not working properly.

I am facing difficulties to set seek bar with border-radius which over the image

image

.img-border-rad {
  border-radius: 10px;
}

.progressbar {
  background-color: #b1b1b1;
}

.progressbar>div {
  background-color: #fa1212;
  height: 4px;
}
<div class="img-pad">
  <img src="https://via.placeholder.com/600x100" class="img-border-rad">
  <div class="progressbar">
    <div style="width: 40%;"></div>
  </div>
</div>

css html
4 Answers

Put a wrapper around both elements and set the border radius on that. Hide overflow on the wrapper.

.border-rad {
  border-radius: 10px;
  overflow: hidden;
}

.progressbar {
  background-color: #b1b1b1;
}

.progressbar>div {
  background-color: #fa1212;
  height: 4px;
}

img {
  display: block; /* eliminates descender space below */
  max-width: 100%; /* demo only */
}
<div class="img-pad border-rad">
  <img src="https://via.placeholder.com/700x100">

  <div class="progressbar">
    <div style="width: 40%;"></div>
  </div>
</div>

user_12648040

isherwood has a more clear answer for the code you presented. However, I still wanted to offer my answer as it is another approach to the same problem. In the code below, I remove the img tag entirely, and render the image as the background of the container. Then I apply the styling to define width, height, border radius, on the container. This way, the progress bar is laid over the image instead of sitting under it.

#test-image-container {
  position: absolute;
  height: 300px;
  width: 400px;
  background-image: url("https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  overflow: hidden;
}

.progressbar { 
  background-color: #b1b1b1; 
  position: absolute;
  bottom: 0;
  width: 100%;
}

.progressbar > div { 
  background-color: #fa1212; 
  height: 10px; 
}
<div class="img-pad" id="test-image-container">
    <div class="progressbar">
      <div style="width: 40%;"></div>
    </div>
</div>

user_79786270

Here is a small improvement on @isherwood 's answer, that makes the progress bar div not extend farther right than the image.

Changes: position and display on .border-rad and .progressbar.

EDIT: What the previous answer looks in Chrome when I run it full screen: enter image description here

.border-rad {
  display: inline-block;
  border-radius: 10px;
  overflow: hidden;
  position:relative;
}

.progressbar {
  background-color: #b1b1b1;
  position:absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.progressbar>div {
  background-color: #fa1212;
  height: 4px;
}

img {
  display: block; /* eliminates descender space below */
  max-width: 100%; /* demo only */
}
<div class="img-pad border-rad">
  <img src="https://via.placeholder.com/700x100">

  <div class="progressbar">
    <div style="width: 40%;"></div>
  </div>
</div>

user_124006370

The key here is using position absolute to position the progress bar to the bottom of the img-pad container, and to set img-pad to display inline-block.

.img-pad {
  display: inline-block;
  position: relative;
}

.img-border-rad {
  border-radius: 10px;
}

.progressbar {
  height: 4px;
  position: absolute;
  bottom: 4px;
  width: 100%;
  background-color: #b1b1b1;
}

.progressbar__done {
  height: 4px;
  position: absolute;
  background-color: #fa1212;
}
<div class="img-pad">
  <img src="https://www.gravatar.com/avatar/dd7c1fa96edde079ae4b987eec68f6d1?s=420&d=identicon&r=PG&f=1" class="img-border-rad">
  <div class="progressbar">
    <div class="progressbar__done" style="width:40%;"></div>
  </div>
</div>

Display inline-block set the div width to fit the content. Position absolute lets the div be positioned using top, left, right, bottom properties inside the last element that has a position defined.

Checkout these links for more info:

Check out this fiddle: https://jsfiddle.net/wsc13gjf/

user_79485160
Related