CSS iMac

by moob

HTML

<div class="project-widget">
    
   <div class="imac">
        <div class="bezel">
            <div class="screen"></div>
        </div>
        <div class="stand"></div>
    </div>

    <div class="imac">
        <div class="bezel">
            <div class="screen" style="background-image:url(http://lorempixel.com/400/250/abstract)" >
            </div>
        </div>
        <div class="stand"></div>
    </div>
</div>

CSS

.project-widget {
    width:30%;
   
    margin:auto;

    /*
     padding:200px 0px;
    background: url(http://store.storeimages.cdn-apple.com/3814/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ma/imac27/selection/imac27-selection-hero-2014?wid=291&hei=179&fmt=png-alpha&qlt=95&.v=1411109113778) no-repeat;*/
}
.imac {
    display:block;
    position:relative;
    padding-bottom:9%;
    margin-bottom:16%;
    border-radius:5px;
    background: #a0a0a0;
    /* Old browsers */
    background: -moz-linear-gradient(left, #a0a0a0 0%, #e0e1e3 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #a0a0a0), color-stop(100%, #e0e1e3));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #a0a0a0 0%, #e0e1e3 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #a0a0a0 0%, #e0e1e3 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #a0a0a0 0%, #e0e1e3 100%);
    /* IE10+ */
    background: linear-gradient(to right, #a0a0a0 0%, #e0e1e3 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a0a0a0', endColorstr='#e0e1e3', GradientType=1);
    /* IE6-9 */
}
.imac .bezel {
    display:block;
    position:relative;
    background-color:black;
    border-radius:5px 5px 0px 0px;
    padding:4.25%;
    overflow:hidden;
}
.imac .bezel:after {
    content:"";
    display:block;
    position:absolute;
    background-color:rgba(255, 255, 255, 0.2);
    background: -moz-linear-gradient(top,  rgba(255,255,255,0.25) 0%, rgba(255,252,252,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.25)), color-stop(100%,rgba(255,252,252,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.25) 0%,rgba(255,252,252,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,0.25) 0%,rgba(255,252,252,0) 100%); /*...