SP Overlay: CSS

myscreen.lsml.js

myapp.menuHome.buttonResources_postRender = function (element, contentItem) {
    $(element).spOverlay(contentItem, 'Content/Images/TouchIcons/ResourcesLarge.png', { height:170, width:170});
};

myapp.menuHome.buttonDesigns_postRender = function (element, contentItem) {
    $(element).spOverlay(contentItem, 'Content/Images/TouchIcons/DesignsLarge.png');
};

myapp.menuHome.buttonProjects_postRender = function (element, contentItem) {
    $(element).spOverlay(contentItem, 'Content/Images/TouchIcons/ProjectsLarge.png'); 
};

sp-overlay.js

        (function ($) {
            $.fn.spOverlay = function (contentItem, imageUrl, options) {
                $element = this;
                var me = $.extend({
                    width: 200,
                    height: 200,
                    displayName: contentItem.model.displayName,
                    description: (contentItem.model.description) ? contentItem.model.description : '',
                    element: this,
                    imageUrl : imageUrl,
                }, options);

                me.createSpOverlay = function () {
                    me.element.find('a').css({
                        'background-image': 'url(' + me.imageUrl + ')',
                        'background-repeat': 'no-repeat',
                        'background-position': 'center',
                        'width': '' + me.width + 'px',
                        'height': '' + me.height + 'px'
                    });
                    setTimeout(function () {
                        me.element.find('a').html(
                        '<div style="width:100%;height:100%;position:relative;" >' +
                        '    <div class="spOverlay" >' +
                        '        <div class="spOverlayBackground"></div>' +
                        '        <div class="spTitle"><p>' + me.displayName + '</p></div>' +
                        '        <div class="spDescription">' + me.description + '</div> ' +
                        '    </div>' +
                        '</div>');
                    });
                };

                me.createSpOverlay();
            };

        }(jQuery));

user-customisations.css

/* ========================
   Sharepoint-like overlay
   ========================*/

a.ui-btn:hover .spOverlay
{
    height:100%;
}

.spOverlay {
    -webkit-transition: height 1s; /* For Safari 3.1 to 6.0 */
    transition: height 1s; 
    position:absolute;
    width:100%;
    height:50px; 
    bottom:0px;
    overflow:hidden;
}
.spOverlayBackground {
    position:absolute;
    width:100%;
    height:100%;
    background-color:rgba( 0,0,0,0.6 );
    opacity:0.8;    
    z-index:0;
}
.spTitle {
    position:absolute;
    top:0px;
    height:50px; 
    color:#FFF;  
    z-index:2; 
    width:100%; 
}
.spTitle p {
    position:absolute;
    bottom:0px;  
    left:15px;
    right:15px;
}
.spDescription {    
    left:15px;
    right:15px;
    position:absolute;
    color:#FFF;  
    top:50px; 
    z-index:2;     
}