Gauge-dailer

by dudi do

HTML

<div class="outer_face">
                    <div class="inner_face">
                        <div class="hand second" style="transform: rotate(0deg);">
                            <img src="http://images.clipartpanda.com/up-clip-art-up-clip-art-5.jpg" />
                        </div>
                    </div>
                </div>

CSS

.outer_face {
    position: relative;
    width: 168px;
    height: 84px;
    
    background: transparent url(http://forum.fusioncharts.com/uploads/monthly_05_2016/post-68960-0-69043300-1463582531.png) no-repeat center;
    background-size: contain;

    /*TODO: Consider of using next lines after using:  'Pie chart': */
    /* For example: background: conic-gradient(yellowgreen 40%, gold 0 70%, #f06 0); */
    /*border-top-left-radius: 168px;
    border-top-right-radius: 168px;
    border: 14px solid black;
    box-shadow: inset 0 0 10px gray;
    border-bottom: 0;*/  
}


.inner_face {
    position: relative;
    width: 60%;
    height: 60%;
    /*background: transparent;*/
    border-top-left-radius: 168px;
    border-top-right-radius: 168px;  
    z-index: 100;
    left: 20%;
    top: 40%
}

.hand, .hand.hour {
    position: absolute;
    width: 4px;
    height: 30%;
    /*top: 20%;*/
    left: 50%;
    margin-left: -2px;
    /*background: black;*/
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -moz-transform-origin: bottom;
    -ms-transform-origin: bottom;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    z-index: -1;
    /*-moz-box-shadow: 0 0 3px gray;
    -webkit-box-shadow: 0 0 3px gray;
    box-shadow: 0 0 3px gray;*/
 }

.hand.second {
    height: 85%;
    width: 13%;
    margin-left: -1px;
    bottom: 0;
}
.second img{
    height: 100%;
    width: 100%;
}