How to fill a transparent image with a progress bar ? #CSS #HTML #Jquery?

Tags: html,css3,progress-bar,fill

Problem :

I'm trying to fill a glass of beer at 30% with html and CSS with the technique of this progress bar csstricks. But I don't know if it's possible.

I have an image of the glass of beer with transparency content (png in illustrator). Do you know if it's possible to have the progress bar in background ? My tests were fruitless.:-(

Or do I have to use another technique ?

Thanks a lot for your help !


Solution :

There you go :D (this is what you can do with a few alterations to the css-trick example): Demo:

<meta charset="UTF-8">
<title>Fillable Beer Bottle</title>
<script type="text/javascript" src=""></script>
        $(function() {
            $(".liquid").each(function() {
                    .data("origHeight", $(this).height())
                        height: $(this).data("origHeight")
                    }, 1200);

        .glass { 
            height: 200px;
            position: relative;
            background-image: url(''); /* Beer Glass */
            background-repeat: no-repeat;
        .liquid {
            width: 200px;
            background-image: url(''); /* Beer Liquid Pattern */
            /* Remove the bottom two lines to stop animation */
            -webkit-animation: move 150s linear infinite;
            -moz-animation: move 150s linear infinite;

        @-webkit-keyframes move {
            0% {
               background-position: 0 0;
            100% {
               background-position: 2212px 0px;

        @-moz-keyframes move {
            0% {
               background-position: 0 0;
            100% {
               background-position: 2212px 0px;

<div class="glass">
            <span class="liquid" style="height: 30%"></span>

    CSS Howto..

    How to do this with vertically stacked tabs, instead of horizontal?

    How i can put the video showing image in front of image using jQuery css in html?

    How to give shadow to a border

    Slideshow won't accept fixed height

    how to set formatting of all textbox in website with css, without set cssclass property of each textbox

    How to pop a dialog box /iframe/Lightbox like one below above the webpage content [closed]

    How do I set the offset of a div from the top of an outer div to be the same as the offset from the side of the outer div using only css?

    How can I use css properties with different classes?

    How do I create a region/zone map for the web? [closed]

    How to shrink the menu when mouse hover on a link using jquery

    how to set background-image to pseudo element?

    Switching styles (Class) on a function that show and hide a div tag content

    How can I select second element and after that in CSS?

    How can i align the text in center of a row in css?

    How can I make vertical switch

    How to align text next to an icon with CSS?

    CSS: Div boxes overlap each other and hide text. How to “clear” them?

    How to implement Read more / Read less in pure CSS

    CSS: how to do away with automatic rescaling of font-size on Safari

    How to prevent randomly positioned images from overlapping using Angular

    How to keep navigation tab remain unchanged

    Knockout - How to bind outer container css from set of checkboxes?

    How to slow drop menu animation with CSS only

    How can I mark it up? [closed]

    How to customize bootstrap fixed navbar-default so that li elements align downward?

    How to check if a css rule exists

    Why are div's not staying in row and how to get them to?

    How to Draw Kundli Design (diamonds and triangles in square) using HTML and CSS?

    How to stop css animation in current position on hover?

    How to select the first occurrence of an HTML element in CSS that does not have a specific class?