CODEWITHSUNDEEP
htmlcss
Kanishk Varshney
Kanishk Varshney

Reputation: 43

How to mask the lower half of a div element

I have a <div> with an image as background and some progress bars, I want a orange colored transparent layer over lower half of this <div>. I tried applying a layer mask inside div.portfolio-technical, but it was only getting applied to the image but not coming over the progress bars. I changed the code to table display, which helped me manage progress bars better but still not able to apply a transparent mask

<div class="portfolio-technical">
  <table width=100%>
    <th>
      <div class="portfolio-text">
        <div class="progress">
          <div class="progress-bar bg-info progress-bar-striped" role="progressbar" style="width: 67%" aria-valuemin="0" aria-valuemax="100">Progress1</div>
        </div>
        <div class="progress">
          <div class="progress-bar bg-info progress-bar-striped" role="progressbar" style="width: 53%" aria-valuemin="0" aria-valuemax="100">Progress2</div>
        </div>

        <div class="progress">
          <div class="progress-bar bg-info progress-bar-striped" role="progressbar" style="width: 45%" aria-valuemin="0" aria-valuemax="100">Progress3</div>
        </div>

        <div class="progress">
          <div class="progress-bar bg-info progress-bar-striped" role="progressbar" style="width: 85%" aria-valuemin="0" aria-valuemax="100">Progress4</div>
        </div>

        <div class="progress">
          <div class="progress-bar bg-info progress-bar-striped" role="progressbar" style="width: 57%" aria-valuemin="0" aria-valuemax="100">Progress5</div>
        </div>

      </div>
    </th>
    <th>
      <img class="portfolio-image-tech" src="images/portfolio1.png" align="left">
    </th>
  </table>
</div>

Upvotes: 1

Views: 400

Answers (1)

tao
tao

Reputation: 90068

This is all you need:

.portfolio-technical {
  position: relative;
}
.portfolio-technical .overlay {
  height: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  background-color: rgba(255, 153, 0, .65);
  z-index: 1
}

<div class="portfolio-technical">
  <table>
      <!-- table markup here -->
  </table>
  <div class="overlay"></div>
</div>

See it working: 

.portfolio-technical {
  position: relative;
}

.portfolio-technical .overlay {
  height: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  background-color: rgba(255, 153, 0, .65);
  z-index: 1;
}

table {
  width: 100%
}

td, th {
  padding: .5rem;
  border: 1px solid #eee;
}
<div class="portfolio-technical">
  <table cellspacing="0">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
      <th>Header 5</th>
    </tr>
    <tr>
      <td>Row:1 Cell:1</td>
      <td>Row:1 Cell:2</td>
      <td>Row:1 Cell:3</td>
      <td>Row:1 Cell:4</td>
      <td>Row:1 Cell:5</td>
    </tr>
    <tr>
      <td>Row:2 Cell:1</td>
      <td>Row:2 Cell:2</td>
      <td>Row:2 Cell:3</td>
      <td>Row:2 Cell:4</td>
      <td>Row:2 Cell:5</td>
    </tr>
    <tr>
      <td>Row:3 Cell:1</td>
      <td>Row:3 Cell:2</td>
      <td>Row:3 Cell:3</td>
      <td>Row:3 Cell:4</td>
      <td>Row:3 Cell:5</td>
    </tr>
    <tr>
      <td>Row:4 Cell:1</td>
      <td>Row:4 Cell:2</td>
      <td>Row:4 Cell:3</td>
      <td>Row:4 Cell:4</td>
      <td>Row:4 Cell:5</td>
    </tr>
    <tr>
      <td>Row:5 Cell:1</td>
      <td>Row:5 Cell:2</td>
      <td>Row:5 Cell:3</td>
      <td>Row:5 Cell:4</td>
      <td>Row:5 Cell:5</td>
    </tr>
    <tr>
      <td>Row:6 Cell:1</td>
      <td>Row:6 Cell:2</td>
      <td>Row:6 Cell:3</td>
      <td>Row:6 Cell:4</td>
      <td>Row:6 Cell:5</td>
    </tr>
    <tr>
      <td>Row:7 Cell:1</td>
      <td>Row:7 Cell:2</td>
      <td>Row:7 Cell:3</td>
      <td>Row:7 Cell:4</td>
      <td>Row:7 Cell:5</td>
    </tr>
  </table>
  <div class="overlay"></div>
</div>

No matter what you put in the table, it will be displayed under .overlay, as long as <table> doesn't have a set z-index greater than .overlays.

And, by the way, using <table> elements for layout is, for the majority of web programmers, a statement along the lines of: "I'm way below average at this web thing. and I didn't waste my time learning the basics.". If you care about what other coders think of you when they look at your code, you might want to change it. One of the best ways to learn is to inspect existing web pages and see how they're made.

Last, but not least, <th> elements are invalid children of <table> and it's not guaranteed it will work. You should at least wrap them in <tr> elements.

Upvotes: 1

Related Questions