Overlay on a flexbox while keeping responsivness

  • Thread starter Superposed_Cat
  • Start date
In summary, the conversation discusses creating an overlay for a progress bar with text using the CSS property "flex" for responsiveness. The issue of breaking the layout is addressed and suggestions are made to use relative and absolute positioning. A solution is provided using JSFiddle and the possibility of achieving the same effect with CSS only is mentioned.
  • #1
Superposed_Cat
388
5
With the below code, I am trying to make an overlay for a "progress bar" with text, I need the flex to make it responsive,
BUT the only way I know to make an overlay is to use things like fixed or absolute position, which breaks the layout, is there a way to keep it responsive and have an overlay with dynamic width (for displaying progress).

HTML:
.master{
  display: flex;
}
.item{
    border-right: 1px solid black;
    padding-right: 5px;
    display: inline-block;
    text-align: center;
    padding: 15px 0;
    flex-grow: 1;
    flex-basis: 0;
}
<div style='border:1px solid black;margin: 0 auto;'>
  <div class='master'>
    <span class="item">a</span>
    <span class="item">b</span>
    <span class="item">c</span>
  </div>
  <div id='overlay' style='background-color:red;opacity:0.7;width:100%;height:100%;'></div>
</div>
 
Technology news on Phys.org
  • #2
Not sure what you mean by 'breaking the layout'? Have you tried position: relative; on the outer div and position: absolute; top: 0; on the #overlay div? It will be easier to work out what is going on if you use CSS class selectors for all elements rather than the mix of id selectors, class selectors and inline CSS you currently have.
 
  • Like
Likes DaveC426913
  • #3
Yep. position relative on the container div

If you put a bare-bones example in jsfiddle or plunkr we could see what's happening.
 
  • #4
DaveC426913 said:
If you put a bare-bones example in jsfiddle or plunkr we could see what's happening.
Actually I had some time free on the train so did exactly that, fixed and tidied up a bit. I also implemented the "overlay" as an underlay which I think gives a better effect - see it all at https://jsfiddle.net/pbinuk/py3L92z0
 
  • #5
Very nice.

If you are of-a-mind, I suspect you could skip the JavaScript and do this in CSS only, using a combination of a background-gradient and a transition delay.
 

Related to Overlay on a flexbox while keeping responsivness

1. How can I add an overlay on top of a flexbox while keeping it responsive?

To add an overlay on top of a flexbox, you can use the CSS property "position: relative" on the flexbox and "position: absolute" on the overlay. This will position the overlay relative to the flexbox, allowing it to cover the entire flexbox. To keep it responsive, make sure to use percentage values for the overlay's width and height rather than fixed pixel values.

2. Can I add an overlay on a specific item within the flexbox?

Yes, you can add an overlay on a specific item within the flexbox by using the "position: relative" property on the flexbox and "position: absolute" property on the item. This will position the overlay relative to the item, allowing it to cover that specific item within the flexbox.

3. How can I make the overlay appear on hover?

You can make the overlay appear on hover by using the CSS "hover" pseudo-class. Add the overlay as a child element of the item you want to hover over, and then use the "display: none" property on the overlay. On hover of the parent item, change the "display" property of the overlay to "block" or "inline-block" to make it appear.

4. Is it possible to add a background image to the overlay?

Yes, you can add a background image to the overlay by using the CSS "background-image" property. Make sure to also specify the "background-size" property to ensure the image covers the entire overlay. You can also use the "background-color" property to add a solid color to the overlay.

5. Can I add text or other elements inside the overlay?

Yes, you can add any type of content inside the overlay, just like you would with any other element. This includes text, images, buttons, and more. You can use CSS to style these elements as desired. Just make sure to use the "position: absolute" property on the overlay and position the elements within it accordingly.

Similar threads

  • Programming and Computer Science
Replies
10
Views
1K
  • Programming and Computer Science
Replies
1
Views
1K
  • Programming and Computer Science
Replies
8
Views
385
  • Programming and Computer Science
Replies
9
Views
4K
  • Programming and Computer Science
Replies
4
Views
2K
  • Programming and Computer Science
Replies
2
Views
155
  • Programming and Computer Science
Replies
9
Views
3K
Replies
1
Views
860
  • Programming and Computer Science
Replies
2
Views
5K
  • Programming and Computer Science
Replies
13
Views
1K
Back
Top