Feedback Given Overlay

by Hugo Carneiro

HTML

<div class="list">
    <ul>
        <li class="linked feedback">
            <div class="list-image">
                <img src="http://placehold.it/200x200">
            </div>
            <div class="list-desc">
                <p class="list-title">SteelHead</p>
                <p>13:30 - 14:15
                    <br>Catherine Liao</p>
            </div>
        </li>
        <li class="linked ">
            <div class="list-image">
                <img src="http://placehold.it/200x200">
            </div>
            <div class="list-desc">
                <p class="list-title">SteelHead</p>
                <p>13:30 - 14:15
                    <br>Catherine Liao</p>
            </div>
        </li>
        <li class="linked">
            <div class="list-image">
                <img src="http://placehold.it/200x200">
            </div>
            <div class="list-desc">
                <p class="list-title">SteelHead</p>
                <p>13:30 - 14:15
                    <br>Catherine Liao</p>
            </div>
        </li>
        <li class="linked feedback">
            <div class="list-image">
                <img src="http://placehold.it/200x200">
            </div>
            <div class="list-desc">
                <p class="list-title">SteelHead</p>
                <p>13:30 - 14:15
                    <br>Catherine Liao</p>
            </div>
        </li>
    </ul>
</div>

CSS

.list ul {
    padding: 0;
    margin: 0;
    font-size: 16px;
}
.list ul li {
    list-style: none;
    border-bottom: 1px solid rgba(51, 51, 51, 0.2);
    padding: 10px 10px 10px 86px;
    position: relative;
    min-height: 71px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}
.list li:nth-child(2n) {
    background: rgba(167, 172, 162, 0.1);
}
.list ul li.linked {
    padding-right: 44px;
}
.list ul li.linked.feedback:before {
    content:"";
    display: block;
    position: absolute;
    background: url(http://i62.tinypic.com/20ib5uh.png) rgba(0, 0, 0, 0.3) no-repeat;
    background-position: 85% center;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    height: auto;
}
.list ul > li .list-image {
    width: 70px;
    height: 70px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -35px;
}
.list ul > li .list-image img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 100%;
    max-width: 100%;
}
.list ul > li .list-title {
    font-size: 1em;
    font-weight: 600;
    margin: 0;
}
.list ul > li p {
    margin: 0;
}
.list ul > li .list-title + p {
    margin-top: .5em;
}
.list ul > li:after {
    content:'';
    display: block;
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    right: 10px;
    margin-top: -12px;
    background-color: #333;
    -webkit-mask: url(http://selfmademan.com/v2/images/icon-right-arrow.png);
    -moz-mask: url(http://selfmademan.com/v2/images/icon-right-arrow.png);
    -ms-mask: url(http://selfmademan.com/v2/images/icon-right-arrow.png);
    mask: url(http://selfmademan.com/v2/images/icon-right-arrow.png);
    -webkit-mask-size: cover;
    -moz-mask-size: cover;
    -ms-mask-size: cover;
    mask-size: cover;
}