如何在CSS HTML（Tumblr）中制作交替图像蒙版

Question

我正在尝试为Tumblr编写一个布局。我花了3天时间试图弄清楚如何在html中制作遮罩功能，但现在我需要知道如何为“偶数”和“奇怪的照片”制作掩码，我开始使用布局生成器，只是调整了一些东西给我的喜好。

这就是我想要的最终产品： HERE

我可以让三角形面具工作，但我不能让图像交替出现，以便它们是正在进行的“照片贴”

以下是我对HTML代码的了解

                            <ul class="photos">
                            <a href="{PhotoURL-HighRes}" class="image-link clearfix">
                            {block:Photos}
                            <li><img src="{PhotoURL-500}" alt="" style="-webkit-mask:url('http://imageshack.com/a/img203/1613/eh1g.png')">
                            <li><img src="{PhotoURL-500}" alt="" style="-webkit-mask:url('http://imageshack.com/a/img827/3876/ce0p.png')">
                            </a>
                            {/block:Photos}
                            </ul

以下是我对CSS的看法

/* --------------------------------------------------------------------------
    $PHOTO POSTS
/--------------------------------------------------------------------------*/
.post.photo .post-body 
{
    padding:0;
    /* Remove padding */
    position:relative;
    /* Set position to relative so we can absolute position the caption */
    overflow:hidden;
}
.post.photo .post-body img
{
    display:block;
    width:159px;
    height:160px

    /* Full width, block image */
    }
.post.photo .post-body .caption 
{
    position:absolute;
    bottom:0;
    /* Place caption at bottom, over image */
        background:transparent url(http://totallylayouts.com/tumblr-generator/themes/default/img/fff-0.7.png);
    /* Semi-transparent background */
    width:100%;
    /* And full width */

    display:none;
}
    .post.photo .post-body .caption > span 
    {
        display:inline-block;
        padding:20px;
        /* Give some padding to the caption */
        font-size:14px;
        /* Increase the font size */
        text-shadow:#fff 0 1px 1px;
    }




/* Media permalinks */

.media-permalink 
{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:transparent url(http://totallylayouts.com/tumblr-generator/themes/default/img/000-0.7.png);
    color:#fff;
    text-align:center;



    opacity:0;
    -webkit-transition:opacity 0.5s;
}

    .media-permalink a 
    {
        color:#fff;
    }

    .photo img:hover + .media-permalink, 
    .media-permalink:hover
    {
        opacity:1!important;
    }

    .media-permalink span 
    {
        display:block;
        position:absolute;
        top:50%;
        left:0;
        width:100%;
        text-align:center;
        margin-top:-10px;
        height:20px;
    }

.media-permalink.style5, 
.media-permalink.style6 
{
    background:none;
}   
.media-permalink.style5 span, 
.media-permalink.style6 span 
{
    display:block;
    position:absolute;
    bottom:0;
    left:0;
    width:96%;
    padding:5px 2%;
    text-align:center;
    margin:0;
    top:auto;
    height:20px;
    background:transparent url(http://totallylayouts.com/tumblr-generator/themes/default/img/000-0.7.png);
    text-align:right;

    }

.media-permalink.style6 span 
{
    text-align:left;
}





@media only screen and (max-width: 400px) 
{
    .post.photo > .post-body > .caption > span 
    {
        padding:10px;
        font-size:12px;
        /* Decrease font-size/padding for Mobile */
    }
}

/* --------------------------------------------------------------------------
    $PHOTOSET POSTS
/--------------------------------------------------------------------------*/
.post.photoset .post-body 
{
    position: center;
    padding:0;
    /* Remove padding */
    position:relative;
    /* Set position to relative so we can absolute position the caption */
}

.post.photoset .post-body img
{
    position: center;
    display:block;
    width:159px ;
    height:160px;
    /* Full width, block image */
}

.photoset .photos 
{
    margin:0;
    padding:0;
    list-style:none;
}

.photos li 
{
    margin-top:0px;
}

.photoset .photos li:first-child 
{
    margin-top:0px;
}
.photoset .photos li:first-child img 
{
    margin-bottom:0px;
    }
    .photoset .photos li:img 
{
    margin-bottom:0px;
    }
.photoset .photos li:last-child img 
{
     margin-top:0px;
    }


.post.photoset .post-body > .caption 
{
    position:absolute;
    top:0;
    left: 100%;
    width: ;

    /* Place caption at bottom, over image */
        /* Rounded with post */
    background:transparent url(http://totallylayouts.com/tumblr-generator/themes/default/img/fff-0.7.png);
    /* Semi-transparent background */
    width: 100%x;
    /* And full width */
}
    .post.photoset .post-body > .caption > span 
    {
        display:inline-block;
        padding:20px;
        /* Give some padding to the caption */
        font-size:16px;
        /* Increase the font size */
        text-shadow:#fff 0 1px 1px;
    }