CSS Hover Details

3 Layer übereinander, für Detailansicht mit Iconbar und Maininforamtion

by Jens Kühn

HTML

<div class="group">
    <div class="dribbble">
        <div class="dribbble-shot">
            <div class="dribbble-img">
                <a class="dribbble-link" href="#">
                    1. Maininformation
                </a>
                <a class="dribbble-over" href="#">
                    <strong>Unteres Hover</strong>
                    <span class="comment">Mit mehr Content als im anderen Hover-Effekt möglich</span>
                    <em class="timestamp">26. Oktober 2015</em>
                </a>
                <a class="dribbble-overtop" href="#">
            <div class="dribbble-over">
                Iconbar
            </div>
        </a>
            </div>
        </div>
        
    </div>
</div>

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    border: 0;
    outline: 0;
    background: transparent;
}
html, body{    
    background:rgba(0,0,0,0.07);
}
a:link, a:visited {
    color: #3a8bbb;
    outline: none;
    text-decoration: none;
}
.group {
    position: relative;
    width: 220px;
    float: left;
    padding: 0;
    margin: 15px 15px 30px 15px;
}
.group:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.dribbble{
    position: relative;
    clear: left;
    background: #fff;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
    box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}
.dribbble-shot {
    padding: 10px;
}
.dribbble-img {
    max-width: 100%;
    height: 0;
    padding-bottom: 75%;
    overflow: hidden;
}
.dribbble-img .dribbble-link {
    max-width: 100%;
}
.dribbble-over {
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    top: 80px;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 20px;
    font-size: 13px;
    line-height: 2;
    text-decoration: none;
    color: #888;
    background: #fff;
    background: rgba(255,255,255,0.96);
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.dribbble-over:hover {
    opacity: 1;
    background: #00f;
}
.dribbble-over strong {
    display: block;
    margin: 0 0 4px 0;
    font-weight: 500;
    font-size: 14px;
    line-height:...