Rounded Image Links with a Sweet Hover Effect

by kirupa   |   15 October 2013

It used to be that underlining text links when you hovered over them was really cool. Nowadays,  expectations are a bit higher. It is up to you to figure out clever and more awesome ways of making your inks stand out...without being annoying.

For my attempt at this, take a look at the following example and hover over the links:

Notice that each is a link is basically an image. When you hover each link, the circled behind it (animatedly!) grows in size. When you hover out, the circle returns back to normal. In this deconstruction, you will see how this effect was created and hopefully learn some interesting tips along the way.

Onwards!

The HTML

Let's start with the HTML. I've posted what the relevant HTML for what these links looks like below, but you can view the source separately if you want to view the whole enchilada in its entirety. Anyway, here is the HTML:

<ul id="container">
	<li>
		<a class="book" href="#">
			<span></span>
		</a>
	</li>
	<li>
		<a class="rocket" href="#">
			<span></span>
		</a>
	</li>
	<li>
		<a class="link" href="#">
			<span></span>
		</a>
	</li>
</ul>

Notice that there is nothing initially surprising here. Your links are part of a horizontal menu made up of list items inside an unordered list. The real interesting stuff happens in the links themselves. They are made up of a elements with an empty span as the child:

<ul id="container">
	<li>
		<a class="book" href="#">
			<span></span>
		</a>
	</li>
	<li>
		<a class="rocket" href="#">
			<span></span>
		</a>
	</li>
	<li>
		<a class="link" href="#">
			<span></span>
		</a>
	</li>
</ul>

This probably makes no sense, but we'll fix that shortly because the really REALLY interesting stuff happens in the CSS that targets our a and span elements. Let's look at all that...next!

The CSS

Our HTML is very basic. From reading it, you can't really tell that it will end up looking like the example you saw earlier. That transformation is entirely handled in CSS, but before looking at the CSS, let me explain what is going on in English.

Each a element is responsible for showing the icon that you hover over and click. This icon is specified as a background image. The circle that you see is a defined by our span. The span element is styled to basically be a box with a rounded corner that is soooo round, it ends up looking like a circle.

So far, this should all seem pretty reasonable. The only downside is that with the way things are currently setup, the circle (span) will overlap and cover up the image (a). The way to fix that is pretty simple. Just set the z-index for the span element to be less than that of the parent a tag so that the contents of your span appear below the contents of your a.

The CSS used in the example maps pretty closely to what I just described:

/* center the background image */
#container li a {
	background-repeat: no-repeat;
	background-position: center center;
	display: block;
}

/* define the circle and fall under the image */
#container li a span {
	border-radius: 100%;
    display: block;
    position: relative;
    z-index: -1;
    width: 100px;
	height: 100px;
	transition: all .15s cubic-bezier(.11,.65,1,1.69);
}

/* the icons */
#container li a.book {
	background-image: url("//www.kirupa.com/mini_icons/entypo/large_book.png");
}
#container li a.rocket {
	background-image: url("//www.kirupa.com/mini_icons/entypo/large_rocket.png");
}
#container li a.link {
	background-image: url("//www.kirupa.com/mini_icons/entypo/large_link.png");
}

/* the "circle" color */
#container li a.book span {
    background-color: #7AFF4D;
}
#container li a.rocket span {
    background-color: #FFC926;
}
#container li a.link span {
    background-color: #FFFFFF;
}

Take a few moments to read the CSS and ensure you understand what is going on. At this point, you have your links arranged side-by-side with an icon and a circle background. Your links are mostly done. The only thing that is missing is the hover state where hovering over a link causes the circle to grow in size.

That is handled by the style rule whose selector is #container li a:hover span:

#container li a:hover span {
	transform: scale(1.3);
}

When you hover over the a element, your span's size is increased by 30% by setting the transform property's scale function to 1.3.. Because you are setting a transform, the layout of your element isn't affected. This allows you to hover over a link and not worry about the scaled up circle causing other elements around it to uncomfortably fidget and move around. This complete disregard for layout is one of the advantages of using transforms compared with the traditional width, height, margin, and padding properties.

The last thing to point out is that all of this is awesomely animated with a slight bounce by the transition that is hiding in the #container li a span style rule that you saw earlier:

#container li a span {
	border-radius: 100%;
	display: block;
	position: relative;
	z-index: -1;
	width: 100px;
	height: 100px;
	transition: transform .15s cubic-bezier(.11,.65,1,1.69);
}}

Our transition is set to run for .15 seconds with a custom easing function that provides a slight bounce as the circle scales up in size. You can learn all about transitions and easing functions in the CSS Transitions and Easing Functions in CSS tutorials, respectively.

Conclusion

At first glance, all of this CSS and HTML may seem like a lot of effort for essentially creating three horizontal list menu items made up of individual images. If that's all this effect was about, I would agree with you. The lines of markup add up when you throw in the background circle that needs to scale up when you hover over the link.

This deconstruction only provided an overview of some of the bigger concepts and techniques at play here. As part of the explanations, I tried to post links to the detailed tutorials as appropriate. To make it easier on you, I've re-posted just the links to the relevant tutorials below:

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly via e-mail, facebook, or twitter.

Kirupa Chinnathambi
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.

Add Your Comment (or post on the Forums)

blog comments powered by Disqus

Awesome and high-performance web hosting!
BACK TO TOP
new books - yay!!!