CSS Image Framing - An Easy Way To Frame Images Using CSS
Recent Articles:
- Tracking Outgoing Links in Google Analytics Using Event Tracking and jQuery
- Tracking Internal Website Campaigns With Google Analytics and PHP
- Everything You Need to Know About jQuery's .data() Method
- Google vs. China: How It Will Affect Web Workers
- Don't Like The New Facebook Home Page? Fix It With 5 Lines of CSS
Subscribe To Feed
Subscribers
Subscribers
Feb 04
In the old days web workers would run all of their images through Photoshop (or insert favorite graphical editing program of your choice) and either frame the image with a border, drop shadow, etc. Now with browsers supporting CSS to a much better extent we can toss out Photoshop and stay in code view more often.
I still cringe every time I see an image on a website that leaves padding in the literal jpeg file or that has some sort of border within the jpeg file. It's especially annoying when I go to save the file and discover the effect embedded in the image. These effects can be easily solved with CSS.
Add Spacing or Padding to Images in CSS
This is actually quite easy as you can see and allows us to skip adding that padding via Photoshop.
img { padding: 10px; }
Adding Borders to Images Using CSS
To take the concept a bit further we can use CSS to frame all our images using this simple CSS:
img
{
border: 1px solid #cccccc;
padding: 10px;
}
Another nice effect is to add the :hover state to images. I like to do this using the opacity property and usually a border color change. (Note IE users will need some additional non-valid code for this). I also like to only target the specific property I'm changing i.e border-color to remind myself in the future that the intended :hover action is the border-color rather than re-state border: 1px solid #aaaaaa. It's also slightly smaller in byte size which is always good.
img:hover { border-color: #aaaaaa; opacity: .9; }
A few other effects you might add are a change in the background-color, border-style or a background-image which believe it or not, you can apply a background-image to an IMG tag using CSS.
Putting it all Together
img
{
border: 1px solid #cccccc;
padding: 10px;
opacity: .9;
}
img:hover
{
border-color: #aaaaaa;
opacity: 1;
}
Adding A Bit More Flair To Your Images
Another thing you can do is overlay a caption on your images. Here is the HTML you will need to do this:
<a href="#" class="img">
<img src="http://www.nealgrosskopf.com/images/gallery/homepage.jpg">
<div>Image Caption</div>
</a>
And the CSS you'll want to apply to it:
.img
{
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; }
For more examples on styling your images I recommend checking out this article at the Web Designer Wall. My only gripe with the article is it requires you to have a fixed sized image in order for the styling to properly work. That means if you have one image that is 250px wide and another that is 300px wide, the majority of the Web Designer Wall image styles won't work.
