HTML5/CSS3 Pseudo Element :after

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

<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