Display Outline on Hover

by kirupa   |   10 October 2012

It is very common to display an outline when you hover over something. This snippet gives you what you need to join the club.

The Example

Below is an example of this snippet running (you can also view it in its own page):

When you hover over each image, a black outline displays around the image.

The HTML

The HTML for this example look as follows:

<div id="main">
<div class="pictureContainer">
<img alt="#" height="100" src="http://www.kirupa.com/html5/examples/images/blue_at.png" width="100"></div>
<div class="pictureContainer">
<img alt="#" height="100" src="http://www.kirupa.com/html5/examples/images/gray_amp.png" width="100"></div>
<div class="pictureContainer">
<img alt="#" height="100" src="http://www.kirupa.com/html5/examples/images/green_percent.png" width="100"></div>
<div class="pictureContainer">
<img alt="#" height="100" src="http://www.kirupa.com/html5/examples/images/orange_asterisk.png" width="100"></div>
<div class="pictureContainer">
<img alt="#" height="100" src="http://www.kirupa.com/html5/examples/images/red_question.png" width="100"></div>
<div class="pictureContainer">
<img alt="#" height="100" src="http://www.kirupa.com/html5/examples/images/yellow_sharp.png" width="100"></div>
</div>

This corresponds to the six images that you see.

The CSS

The style rules for tying the look along with the hover behavior together can be seen below:

body {
	background-color: #EFEFEF;
	padding: 20px;
}
#main {
	height: auto;
	width: 380px;
}
.pictureContainer {
	display: inline-block;
	float: left;
	height: 100px;
	margin: 10px;
	width: 100px;
}

Further Exploration

If you want to know more about this snippet or other clever ways it can be used, check out the following articles:

• Changing Focus Styles
• Display an Outline (Not a Border!) on Hover

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇