5 Star CSS

by Reusablecode

HTML

<div class="clearfix" id="stars">
<div class="darn">Oh no!</div>
    <div class="star off">
        <div class="star off">
            <div class="star off">
                <div class="star off">
                    <div class="star off">
                    </div>
               </div>
            </div>
        </div>
    </div>
<div class="brilliant">Thanks!</div>
</div>

CSS

.clearfix div {float:left;position:relative;}
#stars {width:450px;margin:0 auto;}
.star {width:64px;height:64px;background:url(http://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Full_Star_Blue.svg/64px-Full_Star_Blue.svg.png) no-repeat;}
.star:hover {background:url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Full_Star_Yellow.svg/64px-Full_Star_Yellow.svg.png) no-repeat;cursor:pointer}
.group {position:absolute}

.star .star { margin-left: 70px; }
.brilliant { margin-left: 400px; margin-top: -64px; }