Panels - Links

by Hugo Carneiro

HTML

<div class="cont">
    <div class="panels"> <span class="link-icon glyphicon glyphicon-share-alt"></span>

        <div class="list-image"></div>
        <div class="list-desc">
            <p>List item 1</p>
        </div>
    </div>
    <div class="panels"> <span class="link-icon glyphicon glyphicon-share-alt"></span>

        <div class="list-image"> <span></span>

        </div>
        <div class="list-desc">
            <p>List item 1</p>
        </div>
    </div>
    <div class="panels"> <span class="link-icon glyphicon glyphicon-share-alt"></span>

        <div class="list-image"> <span></span>

        </div>
        <div class="list-desc">
            <p>List item 1</p>
        </div>
    </div>
    <div class="panels"> <span class="link-icon glyphicon glyphicon-share-alt"></span>

        <div class="list-image"></div>
        <div class="list-desc">
            <p>List item 1</p>
        </div>
    </div>
    <div class="panels"> <span class="link-icon glyphicon glyphicon-share-alt"></span>

        <div class="list-image"></div>
        <div class="list-desc">
            <p>List item 1</p>
        </div>
    </div>
    <div class="panels"> <span class="link-icon glyphicon glyphicon-share-alt"></span>

        <div class="list-image"><span></span>

        </div>
        <div class="list-desc">
            <p>List item 1</p>
        </div>
    </div>
</div>

CSS

.panels {
    width: 32.6%;
    padding-top: 18.4%;
    position: relative;
    float:left;
    margin-right: 1%;
    margin-bottom:1%;
}
.panels:nth-child(3n) {
    margin-right: 0;
}
.link-icon {
    position: absolute;
    font-size: 2.5vw;
    top: 5px;
    right: 5px;
    z-index: 999;
    color: #FFF;
    -webkit-text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}
.list-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #5cb85c;
}
.list-image span {
    background-image: url('http://fc00.deviantart.net/fs70/f/2014/200/5/f/the_avengers__age_of_ultron___ew_cover_art_by_ratohnhaketon645-d7rbptp.jpg');
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
}
.list-desc {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background: rgba(255, 255, 255, 0.8);
    max-height: 100%;
    overflow: hidden;
}
.list-desc p {
    font-weight: bold;
    padding: 0;
    margin: 0;
}