Hover Cards

A quick prototype for project layouts.

by Travis

HTML

<script src="//fonts.googleapis.com/css?family=Lato:100,300,400,700"></script>
<a class="project-peek">
    <div class="project-peek-image">
        <img src="http://placehold.it/500x300" alt="Kitty">
    </div>
    <div class="project-peek-info">
        <h1 class="project-peek-title">Project Name</h1>
        <span class="project-peek-role">Additional Details</span>
    </div>
</a>
<a class="project-peek">
    <div class="project-peek-image">
        <img src="http://placehold.it/500x300" alt="Kitty">
    </div>
    <div class="project-peek-info">
        <h1 class="project-peek-title">Project Name</h1>
        <span class="project-peek-role">Additional Details</span>
    </div>
</a>
<a class="project-peek">
    <div class="project-peek-image">
        <img src="http://placehold.it/500x300" alt="Kitty">
    </div>
    <div class="project-peek-info">
        <h1 class="project-peek-title">Project Name</h1>
        <span class="project-peek-role">Additional Details</span>
    </div>
</a>
<a class="project-peek">
    <div class="project-peek-image">
        <img src="http://placehold.it/500x300" alt="Kitty">
    </div>
    <div class="project-peek-info">
        <h1 class="project-peek-title">Project Name</h1>
        <span class="project-peek-role">Additional Details</span>
    </div>
</a>

CSS

body {font:100 16px "Lato", Sans-Serif; margin:0; padding:0;}

.project-peek {background:#eee; position:relative; display:block;}
.project-peek-image {}
.project-peek-image img {width:100%; display:block;}
.project-peek-info {
    color:#fff;
    text-transform:uppercase;
    text-shadow:1px 1px 1px rgba(0,0,0,0.1);
    width:100%; 
    height:100%; 
    padding:1em;
    background:rgba(0,0,0,.85);
    box-sizing:border-box;
    position:absolute; 
    top:0;
    opacity:0;
    transition: opacity .4s;
}
.project-peek-info:hover {cursor:pointer; opacity:1;}
.project-peek-title {font-size:1em; margin:0; padding:0;}
.project-peek-role {font-size:.8em; position:absolute; bottom:1em;}

@media screen and (min-width:480px) {
    .project-peek {width:50%; float:left;}
}

@media screen and (min-width:800px) {
    .project-peek {width:25%; float:left;}
}