The KIRUPA orange logo! A stylized orange made to look like a glass of orange juice! Tutorials Books Videos Forums

Change the theme! Search!
Rambo ftw!

Customize Theme


Color

Background


Done

Table of Contents

Rounded Image Links with a Sweet Hover Effect

by kirupa   |    filed under Web Animation

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:

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

Kirupa's signature!

The KIRUPA Newsletter

Thought provoking content that lives at the intersection of design 🎨, development 🤖, and business 💰 - delivered weekly to over a bazillion subscribers!

SUBSCRIBE NOW

Serving you freshly baked content since 1998!
Killer icons by Dark Project Studios

Twitter Youtube Facebook Pinterest Instagram Github