Image Overlays With :after

This is a very useful little trick (I've unfortunately lost the link where I saw this before...) that allows to present images of any size with either round corners or a custom graphical frame. For one or two images this may not be worth it, but if you expect to have hundreds of photos in a dynamically generated page, this may save a lot of time and money vs. pre-processing all images in Photoshop.

The photos in the left and right columns are identical and are shown on the right as they are. On the left we have added a class to the div container for each of the images and this class is defined in the CSS together with an :after pseudo class which adds a pseudo element after each of the divs which is then placed over the div container.

This is a bit of a mind bender: The pseudo element defined with :after is not part of the DOM of the page since it is added as part of the style sheet rendering - the box with the border image exists visibly, but can not be directly manipulated by JavaScript as any other object in the page.

with :after element
without :after element

To the left is the border image that I'm using for the photo frame, and below you can see the HTML for one of the photos inclusive of the div container and the style and pseudo class applied to it:


<div class="framedphoto"><img src="images/crossings1.jpg" width="200" height="150"></div>

<style>
.framedphoto {
	position: relative;
	display: inline-block;
	font-size: 0;
	line-height: 0;
}

.framedphoto:after {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	content: " ";
	border: 10px solid;
	-moz-border-image: url('images/overlay2.png') 20 20 20 20 stretch stretch;
	-webkit-border-image: url('images/overlay2.png') 20 20 20 20 stretch stretch;
	border-image: url('images/overlay2.png') 20 20 20 20 stretch stretch;
}
</style>
						

Discussion

no comments yet...
Your Comments
Name *:        Email *:        URL:
SUBMIT