user: public
login

Css Snippets

Some CSS snippets I've picked up along the way that might come in handy some day.

Alpha-Blended Photo Captions

Photo caption is along bottom portion of image.  From 5 Ways to Spice up Your Images with CSS blog article.

HTML

<div class="img-desc"> <img src="sample.jpg" alt="" /> <cite>Salone del mobile Milano, April 2008 - Peeta</cite> </div>

CSS

.img-desc { position: relative; display: block; height:335px; width: 575px; } .img-desc cite { background: #111; filter:alpha(opacity=55); opacity:.55; color: #fff; position: absolute; bottom: 0; left: 0; width: 555px; padding: 10px; border-top: 1px solid #999; }

size: 778 bytes    file modified: 2019.4.2