Triangle mask

by Matthew Day

HTML

<div class="mask-test">
    <div class="mask"></div>
    <img class="pic" src="http://www.sxc.hu/pic/l/s/so/soulbeauty/1424924_93907966.jpg">
</div>
<div class="text-area">
    <p>This is a test of the emergency broadcast system.</p>
</div>

CSS

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Helvetica;
    font-size: 14px;
    font-weight: 100;
    line-height: 1.5em;
    color: black;
}

.mask-test {
    position: relative;
}

.mask {
    position: absolute;
    top: 0;
    left: 0;
	width: 0;
	height: 0;
	border-bottom: 100px solid rgba(255,255,255,1);
	border-left: 100px solid transparent;
    z-index: 4;
    
    transition: all .6s ease;
}

.mask:hover {
    border-bottom: 100px solid rgba(255,255,255,0);
}

.pic {
    width: 100px;
    height: 100px;
    border-radius: 10px 0;
    z-index: 3;
}

.text-area {
    width: 100%;
    position: relative;
}