Return to Snippet

Revision: 11435
at February 5, 2009 08:03 by neal_grosskopf

Initial Code
<style type="text/css">
display: inline-block;
position: relative;
text-decoration: none;

.img img
border: 1px solid #cccccc;
padding: 10px;

img:hover { border-color: #aaaaaa; }

.img div
background: #666666;
color: #ffffff;
opacity: .70;
padding: 3px 0px;
position: absolute;
left: 0px;
bottom: 25px;
text-align: center;
width: 100%;

.img:hover div { opacity: .90; }

<a href="#" class="img">
<img src="">
<div>Green Plants</div>

Initial URL

Initial Description
A tutorial showing you how to give your images some style using only CSS rather than using Photoshop to give images a border/frame.

Initial Title
CSS Image Framing - An Easy Way To Style Images Using CSS

Initial Tags
css, html, images

Initial Language