Image overlay (landing) template
Language: HTML | XAML

Image overlay (landing) template (HTML)

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

Defines an item that contains an image, a section with large text, and a section with small text. This template is for use with a ListView that has a grid layout. For additional templates, see Item templates for grid layouts and Item templates for list layouts.

To use the template

To use the template, copy the HTML and the CSS styles into your project. The HTML includes a ListView that's designed to be used with the template. After you copy the HTML, set the ListView control's itemDataSource to your app's data source and update the template's data-win-bind attributes so they work with your data.


<!-- Item template -->
<div id="imageOverlayLandingTemplate" 
  <div class="imageOverlayLanding">
    <img class="imageOverlayLandingImage" 
         data-win-bind="src: imageUrl" />
    <div class="imageOverlayLandingOverlay">
      <div class="imageOverlayLandingOverlayText" 
           data-win-bind="innerText: largeText">
      <h6 class="imageOverlayLandingOverlayTextLight" 
          data-win-bind="innerText: smallText">

<!-- ListView -->
<div id="imageOverlayLanding"
    data-win-options="{ itemDataSource: list.dataSource, 
        itemTemplate: select('#imageOverlayLandingTemplate'), 
        layout: { type: WinJS.UI.GridLayout } }">


/* overall list dimensions */

/* imageOverlay-landing - used on app template landing page */
    /* starting margin */
    #imageOverlayLanding .win-surface
        margin: 0px 115px;

    /* individual item dimensions and grid placement */
        width: 250px;
        height: 250px;
        overflow: hidden;
        display: -ms-grid;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr;

        /* image */
        .imageOverlayLanding .imageOverlayLandingImage
            width: 100%;
            height: 100%;
            overflow: hidden;
        /* overlay properties */
        .imageOverlayLanding .imageOverlayLandingOverlay
            -ms-grid-row-align: end;
            background-color: rgba(0,0,0,0.65);
            height: 85px;
            line-height: 20px;
            overflow: hidden;
            padding: 5px 12px 0px 12px;
            /* text line 1 */
            .imageOverlayLanding .imageOverlayLandingOverlay .imageOverlayLandingOverlayText
                width: 220px;
                height: 60px;
                overflow: hidden;
                color: rgb(255,255,255);

            /* text line 2 */
            .imageOverlayLanding .imageOverlayLandingOverlay .imageOverlayLandingOverlayTextLight
                width: 220px;
                height: 20px;
                white-space: nowrap;
                overflow: hidden;
                color: rgba(255,255,255,0.49);

Related topics

Item templates for grid layouts
Item templates for list layouts



© 2017 Microsoft