.post { border: 1px solid #ddd; box-shadow: 0.25em 0.25em #eee; padding: 0; position: relative; display: inline-block; } .post .link { color: black; } .post-type-youtube:after, .post-type-flash:after { position: absolute; right: 0; top: 0; width: 150px; height: 150px; content: ' '; pointer-events: none; } .post-type-flash { border-color: red; } .post-type-youtube { border-color: red; } .post-type-flash:after { background: url('../img/thumb-overlay-swf.png'); } .post-type-youtube:after { background: url('../img/thumb-overlay-yt.png'); } .post .toggle-tag { position: absolute; z-index: 2; width: 100px; height: 30px; background: whitesmoke; opacity: .5; border: 1px solid black; margin: 60px 25px; line-height: 30px; } .post .toggle-tag:hover { opacity: 1; } .post.taggable.tagged .toggle-tag { background-color: #0f0; color: black; } .post.taggable:not(.tagged) .toggle-tag { background-color: #f00; color: white; } .post .link { z-index: 1; } .post:focus, .post:hover { border: 1px solid firebrick; box-shadow: 0.25em 0.25em pink; } .post:focus img.thumb, .post:hover img.thumb { opacity: .9; } .post a { display: inline-block; vertical-align: top; } .post img.thumb { display: inline-block; width: 150px; height: 150px; vertical-align: top; } .post .info-bar { display: none; height: 20px; width: 100%; border-top: 1px solid firebrick; background: rgba(255, 128, 128, 0.75); position: absolute; bottom: 0; } .post:hover .info-bar { display: block; } .post .icon-comments { margin-left: 3px; background-position: -64px -1px; } .post .icon-favs { background-position: -43px -1px; } .post [class^='icon-'] { opacity: .75; width: 20px; height: 20px; line-height: 20px; vertical-align: top; } .post span { vertical-align: top; font-size: small; line-height: 20px; margin-right: 0.5em; display: inline-block; }