Is it possible to create a barometer using only HTML and CSS? My idea is to have a background image with just borders and a foreground image filled with color on top of it. I want to display x% of the foreground image's color to represent progress. Would making a (1-x)% part of the image transparent achieve this effect?
Here is an example of how you could implement this:
<div class="alignfullhigher">
<table>
<tbody>
<tr>
<td class="backtable"><img src="background_no_fill_only_outline.png" width="100%"></td>
</tr>
<tr>
<td class="fronttable"><img src="foreground_fill.png" width="100%" height="160px"></td>
</tr>
</tbody>
</table>
</div>
CSS:-
.alignfullhigher{position:relative; width:100%; height:160px;top:0;right:0;}
.backtable{position:absolute;z-index:-1; width:100%; height:auto;}
.fronttable{position:relative;width:100%; clip: rect(0px,100px,160px,0px); )}