I believe that one of the hallmarks of excellence is not simply working efficiently or striving to learn, but questioning what has been done before.

In that spirit, I was troubled by the code I demonstrated in yesterday’s article on iris wipe effects: the CSS worked, but it seemed overly complex, and I felt sure that there was a way to make it more efficient.

After a restless night, I realized I had been guilty of overthinking things: there is indeed a better way to accomplish the same result, within a limited solution space. That’s not to say that the previous technique is wrong - it’s still the only way I can think to achieve the composite image featuring Marvin the Martian, for example. But this new technique works much better for the general goal of an iris reveal of an image in a round button... and it has the benefit of being much faster to write.

The code is extremely simple: just a single link, or a button, with no other markup needed. The CSS is only a few lines:

a {
	width: 150px;
	height: 150px;
	display: block;
	border-radius: 50%;
	box-sizing: border-box;
	transition: .3s all ease-in;
	text-decoration: none;
	background: url(alicia-demerson.jpg);
	background-position: center;
	background-size: 150px 150px;
	border: 75px solid rgba(0,0,0,1);
}
a:hover {
	border: 0px solid rgba(0,0,0,1);
}

The technique relies on the box-sizing property. Under normal circumstances, the thickness of a CSS border is added to the outside of the element it is applied to, making it larger. But with box-sizing set to border-box, the border is set inside the element. Specifying the border to be whatever color we wish and half the width of the button works to cover content inside the link. By setting the border to 0 on :hover and transitioning between the two states, the image underneath is revealed. In theory, you could also use an inset box-shadow, as I did in the recent CSS Polaroid image processing example.

A couple of neat additional features: if background-size is set to cover or contain, the image effectively “pops out” from the centre of the button, as shown in the example above. And, of course, you can nest as many transitions inside the button as you wish. I’ve provided a few possibilities above; the code to achieve each iris effect is hosted at CodePen for you to play with as you wish.

Another distinction between this technique and the previous example is that due to the way in which the border is resized all of these iris effects are “in to out” or “grow“ motions, whereas the other approach can produce both this and “out to in” effects.

One browser bug to be aware of: Firefox will currently move any text inside the link when the border is resized, even if it is positioned absolute. (You’ll see an example in the third button, left deliberately for that reason). To be compatible across all browsers, text needs to be outside the link if you wish it to remain unaffected by the transition on the border.

Images by florbelas fotographix, licensed under Creative Commons

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/nlhtc